Knockout benutzerdefinierte Bindung Nachkommen $ Daten funktioniert nur, wenn die Eigenschaft bereits existiert

Question

jeder. Ich habe Knockout js doc here gelesen, das sich auf die Kontrolle der Nachkommenbindungen bezieht. Das Szenario ist, dass ich das untergeordnete Element mit dem aktuellen Bindungskontext mithilfe von applyBindingsToDescendants binde, und dann versuche ich auf eine Eigenschaft in diesem Bindungskontext im untergeordneten Element mit $ data.property_name zuzugreifen, es funktioniert nur, wenn der Eigenschaftsname bereits im Original ist binding_context, wenn es später hinzugefügt wird, dann funktioniert $ data.property_name nicht, aber es funktioniert, wenn ich $ data entferne, bitte sehen Sie sich das jsfiddle example an. Kann mir jemand sagen, warum es sich so verhält?

html

<div data-bind="addBindingProperties: {addedProp: 'ADDED PROPERTY'}"> 
    <div>Existing property accessible via $data: <span data-bind="text: $data.existingProp"></span></div> 
    <div>Added property not accessible via $data: <span data-bind="text: $data.addedProp"></span></div> 
    <div>Added property accessible by removing $data: <span data-bind="text: addedProp"></span></div> 
</div> 

Javascript

ko.bindingHandlers.addBindingProperties = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     ko.utils.extend(bindingContext, valueAccessor()); 
     ko.applyBindingsToDescendants(bindingContext, element); 
     return {controlsDescendantBindings: true}; 
    } 
}; 

ko.applyBindings({ 
    existingProp: 'EXISTING PROPERTY' 
}); 

Ergebnis

Existing property accessible via $data: EXISTING PROPERTY 
Added property not accessible via $data: 
Added property accessible by removing $data: ADDED PROPERTY 

Answer 1

Ihre $data hier impliziert Ihre Wurzel Ansichtsmodell, so dass dieser Teil ist falsch ko.utils.extend(bindingContext, valueAccessor());, weil Sie gerade tatsächlich erstreckt im aktuellen Kontext ist es also kein tached zu $data.

Sie es an den Root-Kontext, um die Eigenschaft erweitern können in $data wie zu existieren:

ko.utils.extend(bindingContext, valueAccessor()); 
ko.utils.extend(bindingContext.$root, valueAccessor());