Question

我已经完成了对我的应用程序实施knockout js的任务。我有一张像

这样的表格

<table>
    <tr>
        <th>
            Name
        </th>
        <th>
            Category
        </th>
        <th>
            Price
        </th>
        <th></th>
    </tr>

    <tr>
        <td>
            Iphone
        </td>
        <td>
            SmartPhone
        </td>
        <td>
            50000
        </td>   
    </tr>
</table>

有三个用于创建此字段的文本框。

<div id="create">
    <input data-bind="value: Name" id="name"/>
    <input data-bind="value: Category" id="category"/>
    <input data-bind="value: Prize" id="prize"/>
</div>

当我在这个文本框上打字时，我想在桌子上显示这个作为一个新的tr ..我怎么能这样做？ DEMO

参考Link

Answer 1

您要做的是定义一个包含单个项目数据的viewmodel，以及另一个包含其余交互的视图模型（项目列表，如何添加新项目等）。

var Item = function (Name, Category, Price) {
    var self = this;

    self.Name = ko.observable(Name);
    self.Category = ko.observable(Category);
    self.Price = ko.observable(Price);
}    

var ViewModel = function () {
    var self = this;

    self.ItemToAdd = ko.observable(new Item());

    self.Items = ko.observableArray([]);

    self.addItem = function (item) {
        self.Items.push(item);      
        self.ItemToAdd(new Item());
    }
};

var vm = new ViewModel();

vm.addItem(new Item('Iphone', 'SmartPhone', 50000));

ko.applyBindings(vm);

在你的html中，你的表体看起来像这样：

<tbody data-bind="foreach: Items">
    <tr>
        <td data-bind="text: Name"/>
        <td data-bind="text: Category"/>
        <td data-bind="text: Price"/>
    </tr>
</tbody>

这样做是循环遍历Itemlist中的每个项目，并为每个项目创建一个<tr>，并将observableArray中Item对象的值绑定到<td>元素。

将新项目添加到标记中的表格中：

<div data-bind="with: ItemToAdd">
    <input data-bind="value: Name" id="name"/>
    <input data-bind="value: Category" id="category"/>
    <input data-bind="value: Price" id="price"/>
    <button data-bind="click: $parent.addItem">Add</button>
</div>

这会将div元素的上下文设置为新的Item对象，当您单击Add按钮时，它会调用父上下文（ViewModel）的addItem函数，并自动传递div元素的上下文项（ItemToAdd）。然后只需将其推送到observableArray并且表格将使用新项目进行更新。

更新小提琴：http://jsfiddle.net/BJQgw/4/

如果这是一个真实的应用程序，你可以在将项目添加到列表之前执行某种验证（最好使用敲除验证）

如何使用knockout使用表tr附加文本

1 个答案: