在选定索引更改时调用函数

Question

如何将函数绑定到所选索引更改，类似于将函数绑定到按钮上的单击事件？

我需要这个的原因是我有这个模板必须重复'n'次。这个'n'是从组合框中选择的。

如何使用knockoutJS库执行此操作，因为它只需在模板结构的foreach属性中使用列表/数组对象？

Answer 1

这可能会为你工作。在HTML的样子：

<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的：

<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库中的范围函数。

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>