2013-02-05 25 views
7

Knockout özel bağlama, gözlemlenebilirArray ile nasıl çalışır? Ko.observable() özel bağlamayla kullanıldığında, her şey beklendiği gibi çalışır. Ko.observableArray() kullanıldığında, yalnızca ilk olaylar (bir kez başlat ve güncelleştir) atılır, ancak daha fazla değişiklik saptanmaz (bkz. Aşağıdaki Fiddle veya kodu).Ko.observableArray() ile özel ciltleme nasıl kullanılır?()

<!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> 

cevap

8

Özel bağlayıcınız içinde observableArray öğesinde bir bağımlılık oluşturmak isteyeceksiniz. Yani, gibi çok az şeye: Tek eleman üzerindeki tüm bağlamaları birlikte (daha fazla bilgi here) tetiklenir çünkü

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)"); 
     } 
    }; 

Bu gözlemlenebilir örnekle çalıştığını nedenidir.

Bunun, diğer bağlayıcınızda aynı şekilde davranmaması, foreach'un farklı davranmasıdır. GözlemlenebilirArray'daki değişiklikler, doğrudan doğruya foreach bağlanmasını tetiklemez (veya tüm bölüm yeniden oluşturulacaktır). Bunun yerine, mantığın nasıl değiştiğini değerlendiren ve gerekli artımlı güncelleştirmeleri (bir öğe ekleme, bir öğeyi kaldırma vb.) Değerlendiren ayrı bir ko.computed içinde mantığı tetikler.

+0

Teşekkürler, ilginç bilgiler - bunlar knockoutjs belgelerinde beklerim - en azından böyle şeyler için SO var :) – Dresel

İlgili konular