Quan sát các thuộc tính của một mảng đang được quan sát trong KnockoutJS

Question

Tôi đang làm việc trên một ứng dụng ASP.Net MVC. Hành động của tôi là trả về một khung nhìn với một mô hình là một mảng các đối tượng (một lớp có các thuộc tính như Name, ID, IsViewable).

var model = @Model.ToJson(); // done via extension call 

Tôi muốn quan sát mảng này, vì vậy bất cứ khi nào thay đổi, tôi có thể cập nhật bảng đã bị ràng buộc vào mẫu.

var viewModel = { 
    accounts = ko.observableArray(model) 
} 

Điều này chỉ tốt cho việc thêm và xóa các phần tử khỏi mảng. Tuy nhiên, tôi cũng muốn mẫu cập nhật khi thuộc tính trong một trong các thay đổi của tài khoản (ví dụ: Tên hoặc ID).

Trên trang web KnockoutJS, nó nói: Tất nhiên, bạn có thể làm cho các thuộc tính đó có thể quan sát được nếu muốn, nhưng đó là lựa chọn độc lập. Đây là những gì tôi không thể tìm ra cách để làm.

tôi đã cố gắng một cái gì đó như thế này với vô ích:

var viewModel = { 
    accounts = ko.oservableArray([]) 
} 

for(var i = 0; i < model.length; i++) { 
    ko.observableArray(model[i]); 
    viewModel.accounts.push(model[i]); 
} 

tôi có thể gửi mẫu và bảng nếu nó cần thiết.

Answer 1

Bạn nên xem plugin knockout.mapping. Tôi nghĩ rằng nó làm tất cả mọi thứ bạn đang tìm kiếm để làm.

Answer 2

Tôi đã kết thúc việc này để làm việc, vì vậy tôi nghĩ rằng tôi sẽ chia sẻ với bất cứ ai có thể có cùng một vấn đề.

Bạn cần bọc các mục mảng trong lớp JavaScript. Sau đó, trong các nhà xây dựng, thiết lập từng thuộc tính để obserable:

var model = @Model.ToJson(); 

var viewModel = { 
    accounts = ko.observableArray(ko.utils.arrayMap(model, function(account) { 
     return new AccountWrapper(account); 
    })) 
}; 

function AccountWrapper(account) { 
    this.Property1 = ko.observable(account.Propery1); 
    this.Property2 = ko.observable(account.Propery2); 
    this.Property3 = ko.observable(account.Propery3); 
} 

ko.applyBindings(viewModel); 

Và nếu bạn muốn thay đổi một trong các mục trực tiếp cho thấy sự thay đổi, bạn có thể làm một cái gì đó như:

viewModel.accounts()[3].Name('My Name Changed'); 

Và bạn có thể vẫn được thông báo khi các mục được thêm hoặc xóa:

viewModel.accounts.remove(viewModel.accounts()[4]); 

Answer 3

Đây là một cách tiếp cận mà làm việc và không đòi hỏi các plugin mapping:

var model = @Model.ToJson(); 

var viewModel = { 
    accounts: ko.observableArray([]), 

    fromJS: function(js) { 
     for (var i = 0; i < js.length; i++) { 
      this.accounts.push({ 
       Property1: ko.observable(js[i].Property1), 
       Property2: ko.observable(js[i].Property2), 
       Property3: ko.observable(js[i].Property3) 
      }); 
     } 
    } 
}; 

viewModel.fromJS(model); 
ko.applyBindings(viewModel);