knockout.js observablesの配列を作成する方法は？

Question

私はそれらのプロパティを表示しているオブジェクトの配列を持っています。 個々の編集機能を追加するにはどうすればよいですか？リストの各要素の編集ボタンであると言います。

オブジェクトが編集モードのときに、テキストフィールドの代わりに入力フィールドを表示したいと思っています。これは可視バインディングを使用しています。だから私はそれぞれのブールオブザーバブルが必要です。

リストの要素の量を知らずにこれを行うにはどうすればよいですか...私も追加と削除があるので、新しい要素が作成されるたびに、この配列にオブザーバブルを追加する必要があります。

私はオブジェクトにko.observable要素を与えようとしましたが、これはできませんでした。

Answer 1

私はobservableArrayの中のオブジェクトを使いたいです。次に、必要に応じて多くの行に対してインライン編集機能を使用する例を示します。このリンク、http://knockoutjs.com/documentation/template-binding.htmlで

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>