KnockoutJs: Lấy phần tử bị ràng buộc từ một cá thể mẫu

Question

Có thể lấy được phần tử (hoặc các phần tử) tương ứng mà một cá thể dữ liệu (mô hình) đã được ràng buộc không?

Ví dụ, tôi có một mảng các đối tượng 'Người' lưu trữ trong thuộc tính ViewModel.

tôi ràng buộc ViewModel đến xem mà ám nó, ví dụ:

<div class="people" data-bind="template: { foreach: people }"> 
    <a href="#" class="person" data-bind="text: name"></a> 
</div> 

tôi sau đó ràng buộc một số xử lý sự kiện thông qua jQuery:

$container.on('click', '.person', function(e){ 
    e.preventDefault(); 
    self.showPerson(ko.dataFor(this)); 
}); 

Trong phương pháp showPerson tôi, tôi sẽ tiết kiệm được tham chiếu đến mô hình. Tôi/có thể/cũng lưu một tham chiếu đến phần tử, nhưng tôi không muốn nếu tôi không phải làm như vậy.

self.showPerson = function(person) { 
    // can i get the corresponding element from the 'person' model? 
}; 

Có ai có ý tưởng nào không?

Answer 1

Cú pháp của bạn và sử dụng $ container với jquery và đối số thứ hai của '.person' là unfamil iar với tôi, nhưng trong trình xử lý nhấp chuột của bạn, không phải là this yếu tố đã được nhấp? Bạn không thể chuyển nó đến phương thức showPerson của bạn được không?

$container.on('click', '.person', function(e){ 
    e.preventDefault(); 
    self.showPerson(ko.dataFor(this), this); 
}); 

self.showPerson = function(person, element) { 
    // can i get the corresponding element from the 'person' model? 
}; 

Tôi không biết cách nào có thể quan sát được, nhưng có thể là một vài yếu tố khác nhau. Bạn có thể có một hộp văn bản cho 'tên', hiển thị tên trong một khoảng, sử dụng nó trong một tính toán, có thuê bao, và sử dụng tên() chiều dài trong một tính toán trong một ràng buộc ví dụ.

Điều đó nói rằng, nếu bạn sử dụng phiên bản gỡ lỗi loại trực tiếp, bạn có thể thấy rằng các quan sát của bạn có thuộc tính _subscriptions có thể có những gì bạn đang tìm kiếm. Các phiên bản rút gọn là một số nhân vật duy nhất tôi nghĩ.

Answer 2

Tại sao không di chuyển liên kết sự kiện nhấp chuột bên trong foreach của bạn?

<a href="#" class="person" data-bind="text: name, click: showPerson"></a>

Trong trường hợp này, chức năng showPerson() của bạn sẽ có những dữ liệu chính xác cho person

EDIT:

Xin lỗi, nhưng tôi đoán tôi bị mất cốt lõi của câu hỏi của bạn:

self.showPerson = function (person, event) { 
    element = event.srcElement 
    ... 
} 

Answer 3

self.showPerson = function(data, event) { 
    // event.currentTarget is the DOM element 
    // $(event.currentTarget) gives the jQuery element 
} 

Answer 4

Bạn chỉ có thể tạo ra một ràng buộc

// data-bind="element: observable" 
    // sets observable to element .. 
    ko.bindingHandlers.element = { 
     init: function(element, valueAccessor) { 
      var target = valueAccessor(); 
      target(element); 
     } 
    }; 

Trong mô hình quan điểm của bạn tùy chỉnh, tạo ra một 'trường' để lưu trữ các phần tử:

person.el = ko.observable(null); 

Sau đó, trong html mẫu của bạn ..

<div data-bind="element: el"> .... </div> 

Answer 5

Tôi nghĩ thực tiễn tốt nhất là t o liên kết trực tiếp với một hàm trên mô hình khung nhìn chứ không phải gắn các trình xử lý.

Click binding to parent function in foreach