Question

我正在用knockoutjs制作一张桌子。我有一个简单的表单，将数据插入表中。表格在表格之外。

我完成了3个任务中的2个。插入＆amp;但是删除我似乎无法使选择工作并使用选择填充表单。

中创建了一个非常基本的示例

我的viewmodel的一小部分

  var viewModel = function (items) {
    var self = this;
    self.selectedItem = ko.observable(null);
    self.items = ko.observableArray(ko.utils.arrayMap(items, function (item) {
        return new ItemModel(item.itemAmount);
    }));
    self.inputItem = new ItemModel();
    self.addItem = function () {

        self.items.push(new ItemModel(self.inputItem.itemAmount()));
        console.log(ko.toJSON(self.items));
        self.inputItem.itemAmount("");
    };

    self.removeItem = function (item) {
        self.items.remove(item);
    }.bind(this);

    self.editItem = function (item) {
        self.selectedItem(item);

    }.bind(this);


    self.items = ko.observableArray(ko.utils.arrayMap(items, function (item) {
        return new ItemModel(item.itemAmount);
    }));

};

当我调用editItem（）时，我需要做什么，文本框中填充了表中的值？

我确信这是基本的东西，但我想我已花了很多时间绕圈试图自己排序

Answer 1

Here's a Fiddle表现出与您所要求的相近的东西。我不确定这是最好的用户体验设计，但这应该展示一种处理更新的方法。

视图有一个编辑模板，可以在填充selectedItem时显示。

<!-- ko ifnot: selectedItem -->
    <input type="number" class="span1" min="1" data-bind="value: inputItem.itemAmount" />
    <button class="btn" data-bind="click: addItem">Add</button>
<!-- /ko -->
<!-- ko if: selectedItem -->
    <input type="number" class="span1" min="1" data-bind="value: newItemAmount" />
    <button class="btn" data-bind="click: updateItem">Update</button>
    <button class="btn" data-bind="click: cancelUpdate">Cancel</button>
<!-- /ko -->

视图模型有一个名为updateItem

的新函数

    self.newItemAmount = ko.observable();
    self.updateItem = function(){
        selectedItem().itemAmount(newItemAmount());
        selectedItem(null);
    };

使用knockout js编辑所选项目

1 个答案: