knockout.js - 淘汰赛取消可编辑的行功能取决于新的或现有的项目

Question

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

Answer 1

我更新了这个小提琴，我在 MeasureItem 上添加了一个 isNew 属性。因此，使用此属性，您可以区分 MeasureItem 是否是新的。我还将取消功能移至 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> 

见小提琴