Question

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

我需要这个的原因是我有这个模板必须重复'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>

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

2 个答案: