Knockout.js使用 「與」 結合困境

Question

我有具有下列設置（或多或少）的應用：

JS

var ObjectVM = function(data) { 
    var me = this; 
    me.name = ko.observable(data.name); 
    //Set other properties 
    ... 

    me.isSelected(false); 
}; 
var VM = function() { 
    var me = this; 
    me.Records = []; 
    me.Selected = ko.observable(undefined); 
    me.Select = function (rec) { 
     if (rec.hasChanges == undefined) { 
      //attach editable functionality 
      ko.editable(record); 
     } 
     rec.isSelected(true); 
     rec.beginEdit(); 
     if (me.Selected() != undefined) { 
      if (me.Selected().hasChanges()) { 
       me.Selected().rollback(); 
      } 
      me.Selected().isSelected(false); 
      me.Selected().commit(); 
     } 
     me.Selected(rec); 
     //Do some hiding/showing of form... 
    }; 
    me.Init = function(){ 
     $.ajax({..., 
      success: function(data){ 
      for(var i = 0;i< data.length;i++){ 
      me.Records.push(new ObjectVM(data[i])); 
      } 
     } 
    }; 
}; 

HTML

<div> 
    RECORDS DISPLAY GRID (Pretend it's a table with 5 columns and 10 rows) 
</div> 
<div data-bind="with: Selected"> 
    <form id="editRec"> 
    <label>Name</label> 
     <input data-bind="value: name" /> 
    </form> 
</div> 

我在調用VM的錶行上有一個單擊綁定設置選擇funciton。當Selected（）未定義時，使用「with」綁定將刪除表單，並在Selected（）有記錄時將其添加回去。每次發生這種情況時，我都失去了附加到表單的驗證，製表符和事件綁定（非KO綁定）。該應用程序功能完美，但在記錄之間切換時性能命中，因爲它不得不重新添加表單，設置驗證，ui配置和綁定。

有沒有辦法讓表單停留在頁面上，保留我的綁定和設置，或者我每次選擇值改變時都會被迫處理這個命中？

Answer 1

當前，with綁定將其內容視爲模板，並在值更改時重新呈現。避免重新渲染的唯一方法是不使用with。

<div> 
    <form id="editRec"> 
    <label>Name</label> 
     <input data-bind="value: Selected().name" /> 
    </form> 
</div> 

當然，如果Selected有時會undefined，這是不行的，你必須尋找另一種解決方案。最好的方法是使用自定義綁定，設置了您的事件處理程序，驗證，標籤等

<!--ko with: Selected--> 
<div data-bind="setUpStuff: true"> 
    <form id="editRec"> 
    <label>Name</label> 
     <input data-bind="value: name" /> 
    </form> 
</div> 
<!--/ko--> 

第三種方法避免了一些重新渲染，也支持undefined值是淘汰賽使用2.2和if綁定（並避免with）。在2.2中，if綁定將只會重新呈現，如果該值變得虛僞，但不是如果它從一個真值變爲另一個真值。

<!--ko if: Selected--> 
<div data-bind="setUpStuff: true"> 
    <form id="editRec"> 
    <label>Name</label> 
     <input data-bind="value: Selected().name" /> 
    </form> 
</div> 
<!--/ko-->