2013-02-05 36 views
7

Tính năng ràng buộc tùy chỉnh loại trực tiếp với observableArray như thế nào? Khi sử dụng ko.observable() với tùy chỉnh ràng buộc, mọi thứ hoạt động như mong đợi. Khi sử dụng ko.observableArray(), chỉ các sự kiện ban đầu (init và cập nhật một lần) mới được ném, nhưng các thay đổi khác không được phát hiện (xem Fiddle hoặc mã bên dưới).Cách sử dụng liên kết tùy chỉnh với ko.observableArray()

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="knockout-2.2.1.js"> </script> 
</head> 
<body> 
    <div data-bind="text: Observable, updateBinding: Observable"></div> 
    <div data-bind="foreach: ObservableArray, updateBinding: ObservableArray"> 
     <span data-bind="text: $data"></span> 
    </div> 
    <script type="text/javascript"> 
     ko.bindingHandlers['updateBinding'] = { 
      init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
       alert("Binding Handler (Init)"); 
      }, 
      update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
       alert("Binding Handler (Update)"); 
      } 
     }; 

     function ViewModel() { 
      var self = this; 

      self.ObservableArray = ko.observableArray(); 
      self.Observable = ko.observable(); 
     } 

     var viewModel = new ViewModel(); 

     // Fires Init + Update for Observable and ObservableArray 
     ko.applyBindings(viewModel); 

     // Fires Update for Observable 
     viewModel.Observable(1); 

     // Does nothing 
     viewModel.ObservableArray.push('1'); 
    </script> 
</body> 
</html> 

Trả lời

8

Bạn sẽ muốn tạo phụ thuộc vào observableArray trong ràng buộc tùy chỉnh của mình. Vì vậy, tại cái gì đó rất tối thiểu như:

ko.bindingHandlers.updateBinding = { 
     init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      alert("Binding Handler (Init)"); 
     }, 
     update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      //create a dependency, normally you would do something with 'data' 
      var data = ko.utils.unwrapObservable(valueAccessor()); 
      alert("Binding Handler (Update)"); 
     } 
    }; 

Lý do mà các công trình này với ví dụ quan sát của bạn là bởi vì tất cả các ràng buộc trên một yếu tố duy nhất được kích hoạt với nhau (biết thêm here).

Lý do khiến điều này không hoạt động theo cách tương tự trên ràng buộc khác của bạn là foreach hoạt động khác nhau. Các thay đổi đối với ObservableArray không kích hoạt ràng buộc foreach trực tiếp (hoặc toàn bộ phần sẽ được hiển thị lại). Thay vào đó nó kích hoạt logic trong một ko.computed riêng biệt để đánh giá cách mảng đã thay đổi và làm cho các bản cập nhật gia tăng cần thiết (thêm một mục, loại bỏ một mục, vv).

+0

Cảm ơn, thông tin thú vị - đây là những thông tin tôi mong đợi trong tài liệu knockoutjs - ít nhất chúng tôi có SO cho các công cụ như thế này :) – Dresel

Các vấn đề liên quan