如何創建knockout.js可觀察數組？

我有一個對象的數組，我正在顯示它們的屬性。如何向他們添加個人編輯功能？可以說它是列表中每個元素的編輯按鈕。如何創建knockout.js可觀察數組？

當對象處於編輯模式時，我想顯示輸入字段而不是文本字段，爲此我使用可見綁定。所以我需要爲他們每個人布爾觀察。

如何在不知道列表中元素的數量的情況下做到這一點...我也有添加和刪除，因此每次創建新元素時都需要向此數組添加更多的可觀察元素。

我也試圖給我的對象ko.observable元素，但我不能這樣做。

2017-06-23 Diego Astiazarán

在這個環節，http://knockoutjs.com/documentation/template-binding.html，在 '注5：動態選擇哪個模板使用'，還有一個說法解決您的問題。兩個模板，一個用於編輯模式，另一個用於讀取模式。其他選項是使用'if'綁定（http://knockoutjs.com/documentation/if-binding.html）。希望這可以幫助。 –

謝謝@JoseLuis，我會閱讀有關模板！但是，你能否告訴我更多關於如何使用'if'綁定的方法。 –

這個鏈接（http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html）回答你的問題。 :-) –

我喜歡使用observableArray中的對象。以下是根據需要對許多行進行內聯編輯功能的示例。

function Employee(emp) { 
 
    var self = this; 
 
    self.Name = ko.observable(emp.Name); 
 
    self.Age = ko.observable(emp.Age); 
 
    self.Salary = ko.observable(emp.Salary); 
 
    self.EditMode = ko.observable(emp.EditMode); 
 
    self.ChangeMode = function() { 
 
    self.EditMode(!self.EditMode()); 
 
    } 
 
} 
 

 
function viewModel() { 
 
    var self = this; 
 
    self.Employees = ko.observableArray() 
 
    self.Employees.push(new Employee({ 
 
    Name: "Joe", 
 
    Age: 20, 
 
    Salary: 100, 
 
    EditMode: false 
 
    })); 
 

 
    self.Employees.push(new Employee({ 
 
    Name: "Steve", 
 
    Age: 22, 
 
    Salary: 121, 
 
    EditMode: false 
 
    })); 
 

 
    self.Employees.push(new Employee({ 
 
    Name: "Tom", 
 
    Age: 24, 
 
    Salary: 110, 
 
    EditMode: false 
 
    })); 
 
} 
 
var VM = new viewModel(); 
 
ko.applyBindings(VM);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<table border=1> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Age</th> 
 
     <th>Salary</th> 
 
     <th></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: Employees"> 
 
    <tr data-bind="if: !EditMode()"> 
 
     <td data-bind="text: Name"></td> 
 
     <td data-bind="text: Age"></td> 
 
     <td data-bind="text: Salary"></td> 
 
     <td><button data-bind="click: ChangeMode">Edit</button></td> 
 
    </tr> 
 
    <tr data-bind="if: EditMode()"> 
 
     <td> 
 
     <input data-bind="value: Name"> 
 
     </td> 
 
     <td> 
 
     <input data-bind="value: Age"> 
 
     </td> 
 
     <td> 
 
     <input data-bind="value: Salary"> 
 
     </td> 
 
     <td><button data-bind="click:ChangeMode">Save</button></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2017-06-26 15:16:35

非常有用，我可以像我說的那樣進行編輯，但是在此之後，我需要將我的對象轉換爲JSON（顯然沒有EditMode變量），有沒有辦法做到這一點？我試圖做： 'var unmapped = ko.mapping.toJS（self.editedResources（））;' 但它說：無法獲取未定義或空引用的屬性'toJS'。 .... self.editedResources是我的可觀察數組 –

@DiegoAstiazarán它可以使用[delete]（https://developer.mozilla.org/zh-CN/） US/docs/Web/JavaScript/Reference/Operators/delete）在js/json中刪除一次屬性 –

如何創建knockout.js可觀察數組？

回答

相關問題