選択したインデックスの変更で関数を呼び出す

Question

ボタンのクリックイベントに関数をバインドするのと同様に、関数を選択したインデックスの変更にバインドするにはどうすればよいですか？

私がこれを必要とするのは、このテンプレートを 'n'回繰り返す必要があるからです。この 'n'はコンボボックスから選択されます。

テンプレート構造内のforeach属性のリスト/配列オブジェクトだけを取るので、knockoutJSライブラリを使用してこれを行うにはどうすればよいですか？

Answer 1

これはあなたのために働いている可能性があります。

<select id="mySelect"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="4">4</option> 
</select> 

<table> 
    <thead> 
     <tr> 
      <th></th> 
      <th>name</th> 
      <th>price</th> 
     </tr> 
    </thead> 
    <tbody data-bind="template: {name:'tempTemplate', foreach: tempCollection}"> 
    </tbody> 
</table> 

とJavaScript用：HTMLは次のようになります

<script type="text/javascript"> 
    function temp(name, price){ 
     return {name: ko.observable(name), 
       price: ko.observable(price) 
     }; 
    } 

    $(document).ready(function() { 
     var viewModel = { 
      tempCollection : ko.observableArray([{ name: "Tall Hat", price: "39.95" }]), 
      addTemp: function() { this.tempCollection.push(temp("new","price")) }, 
      removeTemp: function (temp) { this.tempCollection.remove(temp) } 

     }; 
     ko.applyBindings(viewModel); 

     $("#mySelect").change(function() { 
      var len = viewModel.tempCollection().length; 
      for (var i = 0; i < len; i++) { 
       viewModel.removeTemp(viewModel.tempCollection()[0]); 
      } 
      for (var i = 0; i < $(this).val(); i++) { 
       viewModel.addTemp(); 
      } 
     }); 
}); 
</script> 

<script id="tempTemplate" type="text/html"> 
    <tr> 
     <td><span data-bind="text: name" /></td> 
     <td><span data-bind="text: price" /></td> 
    </tr> 
</script> 

Answer 2

今の最良の選択は、スタートを取り、値を停止し、それらの番号の配列を返すレンジ機能を使用することです。私は、たとえば、underscoreライブラリのrange関数を使用します。

var numArray = _.range(0, 5); //returns [0, 1, 2, 3, 4] 

ノックアウトのようにこれを使用してください。

<div data-bind="template: { name: 'myTemplate', foreach: _.range(0, 5) }"> 
</div> 

テンプレート内では、 '$ data'を使用して現在の番号を取得し、インデックスのように使用できます。

<div>Index: <span data-bind="text: $data"></span></div> 
<div>My Object Prop: <span data-bind="text: viewModel.MyObjects[$data].MyProp"></span></div> 

前の例のように単純な反復処理を行いたい場合は、オブジェクトの代わりに、直接この配列のインデックスのアプローチを反復する必要があります。しかし、あなたが何か派手なことをする必要がある場合、このテクニックはトリックを行います。

たとえば、オブジェクトのリストを2つのセットで表示する必要がある場合は、これを行うことができます。

<div data-bind="foreach: _.range(0, viewModel.MyObjects().length, 2)"> 
    <div> 
    <div data-bind="template: { name: 'myTemplate', data: viewModel.MyObjects()[$data] }"></div> 
    <div data-bind="template: { name: 'myTemplate', data: viewModel.MyObjects()[$data + 1] }"></div> 
    </div> 
</div> 

knockout.jsわから