2012-09-01 19 views
15

Mam element wejściowy, który jest związany z nokautem obserwowalnym:Knockout.JS: wyzwalacze w oparciu o zmiany obserwowanej

<input type="text" data-bind="value: myText, valueUpdate: 'keyup'" /> 

ten aktualizuje zaobserwować na każdym keyup. Chcę teraz aktywować dodatkowe zdarzenia, gdy wartość się zmieni.

Poniższa robi to w zasadzie:

this.myTextTrigger = ko.computed(function() { 
    console.log(this.myText()); 
}, this); 

Jednak wydaje się nieco niezgrabne. Wyzwala również przy początkowym utworzeniu szablonu, w którym chcę obsługiwać zmiany po tym. Czy istnieje oficjalny/łatwiejszy sposób wyzwalania zdarzeń na podstawie zmian obserwowanych obiektów?

Odpowiedz

31

Zastosowanie subskrybować:

this.myText.subscribe(function (newText) { 
    console.log(newText); 
}); 

Jeśli chcesz wykorzystać ten spust można rozważyć pisanie do custom binding.

+2

+1 dla subskrypcji ręcznych (http://knockoutjs.com/documentation/observables.html#explicitly_subscribing_to_observables) –

+0

Niestandardowe powiązanie wydaje się przesadą dla pojedynczego wejścia IMHO. Subskrypcja brzmi jak lepszy wybór dla mnie. –

+0

Właśnie tego szukałem. Dzięki! - Odnośnie niestandardowych powiązań: czy istnieje sposób na uogólnione wiązanie dla pól, w których zmiany mają wywoływać inne zdarzenia, i przekazanie tej funkcji do wykonania z poziomu powiązania w kodzie HTML? – gzost

3

Jeśli próbujesz uzyskać dodatkowe informacje w wiązaniu następnie użyć allBindings.get(nameOfOtherBinding) i ustawić parametr nameOfOtherBinding odnoszący się do nazwy wiązanie w tym elemencie, który jest skierowana do funkcji. Albo umieść literał funkcji w kodzie HTML, albo upewnij się, że możesz znaleźć tę funkcję w zakresie definicji procedur obsługi (jak globalnie dołączony do obiektu window).

http://knockoutjs.com/documentation/custom-bindings.html

JS Fiddle Example - http://jsfiddle.net/pqb4xubg/

javascript, że skonfigurowanie obsługi (zarówno w init, lub aktualizacji):

ko.bindingHandlers.generic = { 
    init: function(element, valueAccessor, allBindings){ 
     var val = 'nothing'; 
     // set your other bindings to get pulled in 
     var func = allBindings.get('func'); 
     // normal check if the binding is actually a function 
     if(typeof func === 'function'){ 
      // use the retrieved function 
      val = func(valueAccessor()); 
     } 
     element.innerText = val; 
    } 
}; 
var model = {a:'4', b:5}; 
ko.applyBindings(model); 

HTML, które będą korzystać z obsługi (wypowiedzenia jak elementy z "zabawnym" wiązaniem nie działają):

<div data-bind="generic: a, func: function(val){ return val + 2; }"></div> 
<div data-bind="generic: a, fun: function(val){ return val + 2; }"></div> 
<div data-bind="text: a"></div> 
<div data-bind="generic: b, func: function(val){ return val + 2; }"></div> 
<div data-bind="generic: b, fun: function(val){ return val + 2; }"></div> 
<div data-bind="text: b"></div> 

Można także użyć init z bind do skonfigurowania standardowych procedur obsługi zdarzeń DOM i po prostu jawnie wywołać te funkcje za pomocą czegoś takiego jak jQuery. Dziękuję Ci. Dobry dzień.

Powiązane problemy