在大表格中編輯一行（網格視圖）

Question

爲了編輯大網格視圖，我具有以下代碼（爲便於閱讀而進行簡化）。淘汰賽腳本將爲每行產生隱藏的編輯行。點擊「編輯」按鈕將取消隱藏該行，以便用戶可以編輯該值。幾個html <select>控件有很多<option>標籤，所以生成的html很大。

是否可以在點擊「編輯」按鈕後動態插入一行編輯？還是有更好的方式來處理這個常見的情況使用knockout/jQuery？

<table> 
    <thead>.... </thead> 
    <tbody data-bind="foreach: Contacts"> 
     <tr data-bind="visible: isEditing==false"> 
      <td><span data-bind="text:Name"></span></td> 
      <td><span data-bind="text: Phone"></span></td> 
      <td><span data-bind="text: State"></span></td> 
      <td><a href="#" data-bind="click: startEdit">Edit</a></td> 
     </tr> 
     <tr data-bind="visible: isEditing"> 
      <td> 
       First Name:<input data-bind="value: FirstName" /> 
       Last Name:<input data-bind="value: LastName" /> 
      </td> 
      <td><input data-bind="value: Phone" /></td> 
      <td><select data-bind="value: State">...huge options...</select></td> 
      <td><a href="#" data-bind="click: updateContact">Done</a></td> 
     </tr> 
    </tbody> 

Answer 1

查看您的代碼我不確定startEdit按鈕是否顯示所有聯繫人的編輯行，或者只顯示您點擊的那個編輯行。如果它只在編輯行上出現，考慮使用如果綁定而不是可見。

<tr data-bind="if: isEditing==false">...</tr> 
... 
<tr data-bind="if: isEditing">...</tr> 

當您使用Visible時，編輯行仍然存在，並且應用了所有數據綁定，但它只是不可見。通過使用如果編輯行根本不存在，除非isEditing爲true。在大數據網格上，這可以使頁面加載速度顯着加快。在如果

見擊倒文檔瞭解更多信息http://knockoutjs.com/documentation/if-binding.html

Answer 2

我會用templates你想要的東西，並把可觀察到的在您的視圖模型來回報您的模板的名稱。當您單擊編輯按鈕時，將currentTemplate observable的名稱更改爲您的編輯模板，並且它應該自動換出您的html。

<tbody data-bind="foreach: Contacts"> 
    <div data-bind="template: currentTemplate"></div> 
</tbody> 

<script type="text/html" id="contact-view-template"> 
    <tr> 
     <td><span data-bind="text:Name"></span></td> 
     ... 
    </tr> 
</script> 

<script type="text/html" id="contact-edit-template"> 
    <tr> 
     <td> 
     First Name:<input data-bind="value: FirstName" /> 
     Last Name:<input data-bind="value: LastName" /> 
     </td> 
     ... 
    </tr> 
</script> 


var Contact = function() { 
    var self = this; 

    self.currentTemplate = ko.observable('contact-view-template'); 

    self.onEditClicked = function() { 
     self.currentTemplate('contact-edit-template'); 
     // Some other logic 
    }; 

    self.onSaveClicked = function() { 
     self.currentTemplate('contact-view-template'); 
     // Some other logic 
    }; 
}