Bạn có thể gọi ko.applyBindings để ràng buộc một phần xem không?


257

Tôi đang sử dụng KnockoutJS và có một mô hình xem và xem chính. Tôi muốn một hộp thoại (giao diện người dùng jQuery) xuất hiện với một khung nhìn khác mà mô hình khung nhìn con riêng biệt được ràng buộc.

HTML cho nội dung hộp thoại được truy xuất bằng AJAX vì vậy tôi muốn có thể gọi ko.applyBindingssau khi yêu cầu hoàn thành và tôi muốn liên kết mô hình khung nhìn con với chỉ một phần của HTML được tải thông qua ajax bên trong div hộp thoại.

Điều này thực sự có thể hay tôi cần tải TẤT CẢ các chế độ xem và mô hình xem của mình khi trang ban đầu tải và sau đó gọi ko.applyBindingsmột lần?

Câu trả lời:


430

ko.applyBindings chấp nhận tham số thứ hai là phần tử DOM để sử dụng làm gốc.

Điều này sẽ cho phép bạn làm một cái gì đó như:

<div id="one">
  <input data-bind="value: name" />
</div>

<div id="two">
  <input data-bind="value: name" />
</div>

<script type="text/javascript">
  var viewModelA = {
     name: ko.observable("Bob")
  };

  var viewModelB = {
     name: ko.observable("Ted")
  };

  ko.applyBindings(viewModelA, document.getElementById("one"));
  ko.applyBindings(viewModelB, document.getElementById("two"));
</script>

Vì vậy, bạn có thể sử dụng kỹ thuật này để liên kết viewModel với nội dung động mà bạn tải vào hộp thoại của mình. Nhìn chung, bạn chỉ muốn cẩn thận không gọi applyBindingsnhiều lần trên cùng một yếu tố, vì bạn sẽ nhận được nhiều trình xử lý sự kiện kèm theo.


17
Nếu bạn cũng muốn xóa các ràng buộc tại một số điểm trên đường, bạn có thể gọi ko.cleanNode(document.getElementById("one")để dọn dẹp mọi thứ hoặc ko.removeNode(document.getElementById("one")dọn dẹp mọi thứ và xóa nút khỏi DOM.
Michael Berkompas

7
Chỉ cần một lưu ý rằng cleanNoderemoveNodesẽ không loại bỏ các trình xử lý sự kiện, vì vậy hãy thận trọng. Trong một số trường hợp, tốt hơn là sử dụng templatehoặc withràng buộc trên các khu vực đó, vì vậy bạn có các yếu tố mới được kết xuất.
RP Niemeyer

7
Nó hiện đang thiếu thứ gì đó trong KO. Chúng tôi không có ý định cụ thể cho mọi người để "rebind" phần. Tuy nhiên, KO không đính kèm các sự kiện bằng jQuery, nếu nó được tham chiếu, vì vậy bạn có thể thực hiện $(element).unbind();để xóa tất cả các trình xử lý.
RP Niemeyer

5
Các hàm này (áp dụngBindings, cleanNode, removeNode) được ghi lại ở đâu? Tôi không thể tìm thấy chữ ký chức năng của họ trên knoutoutjs.com.
EricP

2
Sẽ tốt hơn nếu đây là nơi dễ dàng định vị trong tài liệu. Tôi thậm chí không thấy một đề cập đến nó.
Travis Kaufman

61

Trong khi câu trả lời của Niemeyer là một câu trả lời đúng hơn cho câu hỏi, bạn cũng có thể làm như sau:

<div>
  <input data-bind="value: VMA.name" />
</div>

<div>
  <input data-bind="value: VMB.name" />
</div>

<script type="text/javascript">
  var viewModels = {
     VMA: {name: ko.observable("Bob")},
     VMB: {name: ko.observable("Ted")}
  };

  ko.applyBindings(viewModels);
</script>

Điều này có nghĩa là bạn không phải chỉ định thành phần DOM và thậm chí bạn có thể liên kết nhiều mô hình với cùng một thành phần, như sau:

<div>
  <input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>

4
bạn cũng có thể sử dụng "với" để phân bổ các vùng của trang cho các mô hình riêng lẻ - data-bind = "với: VMA"
lexicalscope

3
@flamingpenguin: Có, nhưng withkhông rẻ, xem: link
mhu

7

Tôi đã quản lý để liên kết một mô hình tùy chỉnh với một phần tử trong thời gian chạy. Mã ở đây: http://jsfiddle.net/ZiglioNZ/tzD4T/457/

Điều thú vị là tôi áp dụng thuộc tính liên kết dữ liệu cho một phần tử mà tôi không xác định:

    var handle = slider.slider().find(".ui-slider-handle").first();
    $(handle).attr("data-bind", "tooltip: viewModel.value");
    ko.applyBindings(viewModel.value, $(handle)[0]);

gặp sự cố với ko 2.3, đoạn mã trên nằm trong trình xử lý khách hàng được gọi khi tôi áp dụng ko.applyBindings () toàn cầu. Vì vậy, bây giờ tôi nhận được lỗi "Bạn không thể áp dụng các ràng buộc nhiều lần cho cùng một phần tử.". Tôi vẫn đang cố gắng tìm ra lý do tại sao tôi nhận được lỗi. Chúng ta không thể áp dụng một ràng buộc cho cùng một biến nhiều lần, mỗi yếu tố cho các yếu tố khác nhau?
ZiglioUK

Đây là phiên bản với ko 2.3 không hoạt động: jsfiddle.net/ZiglioNZ/tzD4T/458
ZiglioUK

Thêm một cuộc gọi vào ko.cleanNode () trước khi gọi áp dụng Liên kết với chế độ xem một phần dường như không có ích: jsfiddle.net/ZiglioNZ/tzD4T/459
ZiglioUK

Đã giải quyết: Tôi thậm chí không cần phải gọi applicationBindings!
ZiglioUK

ive vừa chỉnh sửa mã nguồn knoutjs và nhận xét phần mà hàm này vặn "Bạn không thể áp dụng các ràng buộc nhiều lần cho cùng một phần tử.", bây giờ tất cả đều hoạt động tốt ... tôi biết đây là một giải pháp bẩn nhưng tôi mới sử dụng thư viện tôi không biết làm thế nào để không áp dụng nó nhiều lần cho vấn đề của mình.
Geomorillo

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.