问题描述:
我正在使用 knockout 并且我有一张 table 。在此表中,我有 3 列。第一列有一个下拉列表。每当用户从下拉列表中选择一个值时,我想生成一个新行。
这是我的 fiddle : http://jsfiddle.net/JPVUk/10/
<table class="table table-bordered">
<thead class="mbhead">
<tr class="mbrow">
<th>Type</th>
<th>Comment</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="input-small">
<option value="">Type</option>
<option value="">One</option>
<option value="">Two</option>
<option value="">Three</option>
</select>
</td>
<td><input class="input-small"/></td>
<td><input class="input-small"/></td>
</tr>
</tbody>
</table>
<button id="saveButton">save</button>`
我想用 knockout 来完成这个。有没有办法使用 knockout 来完成它?
最佳答案
如果我对您的问题的理解正确,您希望每次下拉菜单中的选择发生更改时,knockout 添加一个新行。
您可以通过使用包含项目的可观察数组创建 View 模型来实现此目的。然后,只要选择发生变化,您就可以在下拉列表中插入项目。请参阅以下内容:
var ViewModel = function() {
var self = this;
self.items = ko.observableArray([{comment:'first comment', amount:0}]);
self.addNewItem = function(){
self.items.push(new Item('',0));
};
}
var Item = function(comment, amount) {
var self = this;
self.comment = ko.observable(comment);
self.amount = ko.observable(amount);
};
vm = new ViewModel()
ko.applyBindings(vm);
如果您随后将以下内容添加到表格标记中:
<tbody data-bind="foreach: items">
<tr>
<td>
<select class="input-small" data-bind="event: { change: $root.addNewItem }">
<option value="">Type</option>
<option value="">One</option>
<option value="">Two</option>
<option value="">Three</option>
</select>
</td>
<td><input class="input-small" data-bind="value: comment"/></td>
<td><input class="input-small" data-bind="value: amount"/></td>
</tr>
</tbody>
我更新了你的 JsFiddle here
关于html - knockout 在表中动态添加一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15589160/