淘汰賽設置selectedItem設置爲空

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時，您將它設置爲對yo的引用你的對象。所以，當你進行編輯時，它們會被製作成實際的對象。

• 一個選項是讓你的對象的複製/克隆進行編輯，然後替換它。

• 另一種方法是跟蹤原始數據（在映射之前）並在取消時使用它來重新創建原始數據。

• 否則，您可以使用像這樣的技術：http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html接受/取消對單個observable的編輯。