在选定的索引更改上调用函数

Question

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

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

我如何使用 knockoutJS 库来做到这一点，因为它在模板结构中的 foreach 属性中只接受列表/数组对象？

Answer 1

现在最好的选择是使用一个范围函数，它接受一个开始和结束值并返回一个包含这些数字的数组。例如，我使用 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>

Answer 2

这可能对你有用。 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>