Mẫu để sửa đổi loại trực tiếp có thể quan sát được đối với cha mẹ từ mô hình xem trẻ em

Question

Tôi có cấu trúc đối tượng mô hình chế độ xem cha-con được thiết lập và cần cập nhật đối tượng có thể quan sát được từ cha mẹ. Tôi đã cơ bản đi lên với hai mô hình để làm như vậy:

1] Vượt qua một tài liệu tham khảo của tài sản cha mẹ cho đứa trẻ và cập nhật tài sản từ bên trong con:

var ParentViewModel = function(){ 
    var self = this; 
    this.selectedItem = ko.observable(); 
    this.child = ko.observable(new ChildViewModel(self.selectedItem)); 
} 

var ChildViewModel = function(parentSelectedItem){ 
    var self = this; 
    this.id = ko.observable(); 
    this.parentSelectedItem = parentSelectedItem; 
    this.select = function(){ 
     self.parentSelectedItem(self); 
    } 
} 

2] Tạo đứa trẻ của chọn phương pháp trên phụ huynh và tham khảo phụ huynh có thể quan sát tại địa phương:

var ParentViewModel = function(){ 
    var self = this; 
    this.selectedItem = ko.observable(); 

    var child = new ChildViewModel(); 
    child.select = function(){ 
     self.selectedItem(child); 
    } 
    this.child = ko.observable(child); 
} 

var ChildViewModel = function(){ 
    this.id = ko.observable(); 
} 

Không có mẫu nào trong số này gửi cho tôi đầu trên giày cao gót. Việc đầu tiên đẩy toàn bộ tài sản tham chiếu vào các mô hình xem trẻ em, thứ hai định nghĩa một chức năng của đứa trẻ bên ngoài phạm vi của đứa trẻ.

Có ai có bất kỳ đề xuất mẫu nào khác về cách thức hoạt động này có thể đạt được trong javascript một cách rõ ràng và có thể kiểm chứng không? Hay tôi ít nhiều bị mắc kẹt chỉ với hai lựa chọn này?

Answer 1

Mô hình phổ biến nhất để thực hiện việc này trong Knockout là đặt phương thức "selectChild" trên cha mẹ của bạn để nhận con. Trong hầu hết các trường hợp, đứa trẻ thực sự không cần biết rằng nó đang được chọn.

Sau đó, trong ràng buộc của bạn, bạn có thể liên kết với $root.selectChild hoặc $parent.selectChild. Đối số đầu tiên được truyền cho một trình xử lý được ràng buộc với liên kết bấm/sự kiện là dữ liệu thực tế (trong KO 2.0), vì vậy phương thức của bạn có thể sống trên cha và nhận con làm arg đầu tiên.

var Item = function(id, name) { 
    this.id = id; 
    this.name = ko.observable(name);  
}; 

var ViewModel = function() { 
    var self = this; 
    this.items = ko.observableArray([ 
     new Item(1, "one"), 
     new Item(2, "two"), 
     new Item(3, "three") 
    ]); 

    this.selectedItem = ko.observable(); 

    this.selectItem = function(item) { 
     self.selectedItem(item); 
    };  
}; 

Trong trường hợp này, bạn ràng buộc sẽ như thế nào:

<ul data-bind="foreach: items"> 
    <li> 
     <a href="#" data-bind="text: name, click: $root.selectItem"></a> 
    </li> 
</ul> 

Dưới đây là trong jsFiddle: http://jsfiddle.net/rniemeyer/anRsA/

Bạn thậm chí có thể đơn giản hóa hơn nữa. Các hàm quan sát là các hàm và đối số đầu tiên mà bạn truyền cho chúng được sử dụng để đặt giá trị của chúng, vì vậy bạn thậm chí có thể chọn không bao gồm phương thức selectItem và chỉ cần ràng buộc trực tiếp $root.selectedItem (trông giống như: http://jsfiddle.net/rniemeyer/anRsA/1/). Tôi thường sử dụng một phương pháp riêng biệt để được rõ ràng, để cung cấp cho nó một tên thích hợp (hành động), và trong trường hợp có xử lý thêm cần phải được thực hiện trước hoặc sau khi thiết lập các mục.

Trước KO 2.0 (nơi $root và $parent đã được giới thiệu cùng với sự thay đổi để vượt qua các dữ liệu như arg đầu tiên click và event xử lý), tôi sử dụng để sử dụng phương pháp đầu tiên mà bạn đề nghị khá một chút. Một điều mà bạn có thể thực hiện ở đó là không tạo thuộc tính con (this.parentSelectedItem) và chỉ tham chiếu parentSelectedItem (đã được chuyển làm đối số) trực tiếp trong phương thức select, vì nó sẽ có sẵn trong hàm do đóng được tạo .