Question

我有这个代码，我为每个项目制作了子编辑功能。当我按下“+”图标时，它会创建一个新的子行，然后我可以编辑并保存 - 当我单击“取消”图标时，我希望删除新创建的子行，但是当我单击“取消”时具有现有数据的现有行我不希望删除该行。怎么解决这个问题？我应该检查输入文本字段是否为空以决定是否应该再次删除它 - 或者是否有其他方法可以解决它？

Answer 1

我更新了fiddle，其中我在MeasureItem上添加了一个isNew属性。因此，使用此属性，您可以区分MeasureItem是否是新的。我还将cancel函数移动到FoodItem类。

JS：

var MeasureItem = function (id, name) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
    this.isNew = false;
};
function FoodItem(id, name, mItems) {
    var self = this;
    self.id = ko.observable(id);
    self.name = ko.observable(name);
    self.measures = ko.observableArray(mItems);
    self.cancel = function (item) {
        vm.selectedItem(null);
        if(this.isNew)
           self.measures.remove(item);
    };
}

修改模板：

<script id="measureEditTmpl" type="text/html">
    <li>
        <input data-bind="value: food.name"/>
        <a class="btn btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a>
        <a class="btn" data-bind="click: $parent.cancel" href="#" title="cancel"><i class="icon-trash"></i></a>
    </li>
</script>

See Fiddle

Knockout取消可编辑的行功能，具体取决于新项目或现有项目

1 个答案: