如何将函数绑定(bind)到选定的索引更改,类似于将函数绑定(bind)到按钮上的单击事件?
我需要这个的原因是我的模板必须重复“n”次。这个“n”是从组合框中选择的。
如何使用 knockoutJS 库来执行此操作,因为它仅在模板结构中的 foreach 属性中使用列表/数组对象?
最佳答案
这可能对你有用。 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>
关于jquery - 在选定的索引更改时调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7191706/