したがって、jQueryテンプレートがベータ版を超えることはなく、jsRenderとjsViewsが空白を埋めることになっています。Boris Mooreがこのページに投稿した例を確認しましたが、jsRenderとjsViewsの違いがわかりません。さらに、Borisは、混乱を助長するために、もう一方の例で一方を使用しました。それで問題は、それらのうちの2つがどのように関連している(または異なる)のかということです。
3 に答える
JsRenderはテンプレートエンジンです。JsViewsはデータバインディングエンジンです。
JsRenderは、テンプレート(データに置き換えられるトークンが埋め込まれた静的HTML / CSS)を使用してHTMLをレンダリングするのに役立ちます。単純なロジック、レンダリング値、およびカスタム関数をサポートします。
JsRenderの上に構築されたJsViewsは、オブジェクト/プロパティに可観測性を追加します。これにより、jsonオブジェクトをHTMLターゲットにリンクし、双方向のデータバインディングを取得できます。
もちろん、それだけではありませんが、それが60秒の答えです。それは役に立ちますか?
jsRenderは単なるテンプレートであり、jsViewsはテンプレートですが、データバインディングでもあります。したがって、オブジェクト、リスト、またはクラスからデータを出力するだけの場合は、jsRenderを使用します。したがって、テンプレートをレンダリングします。jsViewsは、他の多くのすばらしい機能の中でも、リアルタイムのデータバインディング用です。したがって、それを使用してテンプレートをレンダリングし、データバインドされたフィールドがある場合、クライアント側でそれを変更すると、実際には、オブジェクトを取得したオブジェクトに変更します。
たとえば、これが私の作品のこの小さなスニペットでの実際の使用法です。
//this is the script that handles the template
<script id="questionResourceTemplate" type="text/x-jquery-tmpl">
<li class="default-{{:IsDefault}}">
<label data-link="visible{:!IsPageSpecific}" class="surv mleft5"><strong>{{:Type}}</strong></label>
<label data-link="visible{:IsPageSpecific}" class="surv mleft5"><input type="text" data-link="Type" /></label>
<a data-link="visible{:IsDefault}" href="#" action="deletequestionresource">Delete</a>
<br />
{^{for QuestionResourceTexts tmpl="#textTemplate" ~parentQuestionResource=#data ~textboxClass="textbox" /}}
</li>
</script>
そして、これはHTMLで使用される場所です
<ul class="question-resource-list">
{^{for QuestionResources tmpl="#questionResourceTemplate" ~parentQuestion=#data /}}
</ul>
したがって、このオブジェクトが発生するたびに、テンプレートがレンダリングされます。ここにはヘルパー関数もあります。これらは、テストのブール値を返したり、バインド時間中のラッパーのようにデータを操作したりする場合などに使用できます。うまくいけば、これは、この応答の前に回答されたすでに完全な応答に追加するのに役立ちます。
ドキュメントから:
JsRenderは、テンプレートを文字列にレンダリングするために使用され、DOMに挿入できるようになっています。
また、JsRenderテンプレートにデータバインディングを追加するJsViewsプラットフォームでも使用され、インタラクティブなデータ駆動型シングルページアプリやWebサイトを簡単に作成するための本格的なMVVMプラットフォームを提供します。