Knockout + customBinding nie aktualizuje

Question

Mam szybkie pytanie dotyczące customBindings, mam nadzieję, że niektóre mogą mi pomóc wyjaśnić? Pomyślałem, że gdy obserwowalne zostanie zaktualizowane, że wszelkie niestandardowe powiązanie, które jest związane z tym obserwowalnym, zostanie wywołana metoda "aktualizacji". Widzę, że po aktualizacji zauważam, że powiadamiani są inni subskrybenci, ale nie wygląda na to, że wywoływana jest funkcja customBinding.

Oto mój ViewModel:

var innerModel = { 
    name: ko.observable('junk') 
}; 

var innerModel2 = { 
    name: ko.observable('junk2') 
}; 

var viewModel = { 
    im1: innerModel, 
    im2: innerModel2, 
    selectedModel: ko.observable({name:'xxx'}) 
}; 

i tu jest moje customBinding:

ko.bindingHandlers.custom = { 
    update: function(element, valueAccessor) { 
     console.log("BAM!"); 
     while (element.firstChild) 
      ko.removeNode(element.firstChild); 

     ko.renderTemplate('test', valueAccessor(), {}, element, 'replaceNode'); 

    } 
}; 

gdzie mój szablon jest po prostu okres, który wyświetla "nazwa" murawę:

<script id='test' type='text/html' charset='utf-8'> 
<span data-bind='text: name'></span> 
</script> 

Oto kod HTML, którego używam w powiązaniu niestandardowym:

<div id="container" data-bind="with: viewModel"> 
    <div data-bind="custom: selectedModel"> 
    </div> 
</div> 

Po zaktualizowaniu wybranego modelu do jednego z dwóch modeli innerModels wyświetlana jest poprawna nazwa, ale funkcja "update" customBinding nie jest wywoływana. Mam oddzielny abonenta do „selectedModel” obserwowalny:

viewModel.selectedModel.subscribe(function(newValue) { 
    console.log(newValue.name()); 
}); 

i że nazywa się przy zmianie selectedModel, więc dlaczego nie aktualizuje customBinding jest nazywany?

Oto jsfiddle który pokazuje problem: http://jsfiddle.net/gperng/twAcJ/

Każda pomoc będzie mile widziana!

Answer 1

Twoje użycie with jest w tym przypadku nieprawidłowe. Jeśli korzystasz z tego, że to zadziała zgodnie z oczekiwaniami:

<div id="container" data-bind="with: selectedModel"> 
    <div data-bind="custom: $data"> 
    </div> 
</div> 

To dlatego, że w przykładzie custom wiązanie nie jest na selectedModel, ale na całej samego viewmodel, który nie zmienia się.

Oto jsfiddle niego: http://jsfiddle.net/soniiic/twAcJ/7/

Answer 2

Musisz wywołać następującą funkcję, aby to działało:

var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor()) 

Spróbuj skrzypce na więcej: http://jsfiddle.net/twAcJ/13/