敲除将SelectedItem设置为null

Question

我有这个视图模型：

var contactsViewModel = {
      contacts: ko.mapping.fromJS([])                                
};

它被这样填充：

ko.mapping.fromJS(contactsData, dataMappingOptions, contactsViewModel.contacts);    
ko.applyBindings(contactsViewModel);

映射来自ContactItem模型

var dataMappingOptions = {
     key: function (data) {
        return data.id;
     },
     create: function (options) {
         return new contactItem(options.data);
    }
};

现在，我有一个selectedItem方法，我将其添加到视图模型：

contactsViewModel.selectedItem = ko.observable();

因此，我可以添加，删除，编辑等。但是当我致电时取消：

contactsViewModel.cancel = function () {
    contactsViewModel.selectedItem(null);
    console.log(contactsViewModel.selectedItem());
};

我在控制台中无效，但是我正在编辑的项目显示了我的最新更改！！？：（

如果您想查看：

，更多片段

var contactItem = function (data) {
     var self = this;
     self.id = ko.observable(data.id);
     self.email = ko.observable(data.email);
     self.firstName = ko.observable(data.firstName);
     self.lastName = ko.observable(data.lastName);
     self.company = ko.observable(data.company);              
     self.reportsURL = ko.computed(function () {
          return "#/reports/contact/" + self.id;
     });
     // validations:
    ko.validation.configure({
          insertMessages : false
    });
    self.email.extend({
          required: true,
          email: true
    });
    self.firstName.extend({ required: true });
    self.lastName.extend({ required: true });
    self.company.extend({ required: true });
    self.errors = ko.validation.group(self);
};

和我的编辑方法：

contactsViewModel.edit = function (contact) {
    contactsViewModel.selectedItem(contact);
};

和具有此取消的模板：

<script type="text/html" id="edit">
        <td class="editMode">
            <input class="span3 animated fadeInDown" data-bind="value: email, validationAlert : email " />
        </td>
        <td class="editMode">
            <input class="span2 animated fadeInDown" data-bind="value: firstName, validationAlert : firstName " />
        </td>
        <td class="editMode">
            <input class="span2 animated fadeInDown" data-bind="value: lastName, validationAlert : lastName " />
        </td>
        <td class="editMode">
            <input class="span2 animated fadeInDown" data-bind="value: company, validationAlert : company " />
        </td>
        <td class="editMode">
            <ul class="rowOptions">
                <li><a href="#" data-bind="click: $parent.save" title="Save your edits">Save<i class="icon-ok"></i></a></li>
                <li><a href="#" data-bind="click: $parent.cancel" title="Cancel editing">Cancel<i class="icon-remove-circle"></i></a></li>
            </ul>
        </td>
</script>

Answer 1

设置SelectedItem时，将其设置为对对象的引用。因此，当您进行编辑时，它们是对实际对象进行的。

• 一个选项是制作对象的副本/克隆以进行编辑，然后更换。

• 另一个选择是跟踪原始数据（在映射之前）并在取消时使用它来重新创建原始数据。

• 否则，您可以使用这样的技术：http：//www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html接受/取消编辑对单个可观察到。