0

さらに説明されている方法でノックアウト テンプレートを使用できるかどうかを知りたいです。

抽象的なギャラリーを作る場合を考えてみましょう。
テンプレートを次のように定義します。

<div data-bind="template: {name: 'galleryTemplate', data: data}">
  <img data-bind="attr:{src:thmbn}" />
</div>

さて、この場合のギャラリー テンプレートは、次のように定義できます。

<div id="galleryTemplate">
  <div data-bind="foreach: {data: items}">
     /* inner node of template from above */
  </div>
</div>

良さそうに見えますが、ノックアウトで実装する方法がわかりません。
任意の考えをいただければ幸いです。

4

2 に答える 2

0

まずtemplate、一意のIDでを定義する必要があります。これはで行うことができますが、私はこれにタグdivを使用することを好みます：script

<script id="galleryTemplate" type="text/html">
    <div data-bind="foreach: items">
        <img  data-bind="attr:{src:thmbn}" style="width:200px" />
    </div>
</script>

そして、あなたはあなたが望む場所にそれをします：

<div data-bind="template: {name: 'galleryTemplate', data: data}">
</div>

ここに作業中のフィドルがあります：http：//jsfiddle.net/pm7Y9/1/

于 2012-12-12T16:32:55.543 に答える
0

あなたがしたいことをしようとするカスタムバインディングを書くことは可能ですが、簡単ではありません。

ただし、テンプレートの名前を「galleryTemplate」に渡し、それを使用して子をレンダリングする方が簡単な方法だと思います。

何かのようなもの：

<div data-bind="template: {name: 'galleryTemplate', data: { templateName: 'itemTmplOne', data: data } }"></div>

<div data-bind="template: {name: 'galleryTemplate', data: { templateName: 'itemTmplTwo', data: data } }"></div>

<script id="galleryTemplate" type="text/html">
  <div data-bind="template: { name: templateName, foreach: data }"></div>
</script>​

<script id="itemTmplOne" type="text/html">
    <div>one</div>
</script>

<script id="itemTmplTwo" type="text/html">
    <div>two</div>
</script>

サンプルはこちら: http://jsfiddle.net/rniemeyer/jdJPc/

于 2012-12-12T18:20:09.930 に答える