knockout.js - 使用 knockoutjs 编辑所选项目

Question

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

我完成了三分之二的任务。插入和删除但是我似乎无法让选择工作并用选择填充表单。

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

我的视图模型的一小部分

  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

这是一个小提琴，它展示了与您所要求的内容接近的东西。我不确定这是最好的 UX 设计，但这应该展示了一种处理更新的方法。

该视图有一个编辑模板，可以在填充 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);
    };