2016-09-13 1 views
1

ノックアウトのカスタムbindingHandlerで名前付きテンプレートを使用したいと思いますが、カスタムバインディングに渡されたviewModelは$ root、$ parent、$のコンテキストプロパティが削除されているようです私の場合はこの文脈が必要です。カスタムバインディングのko.renderTemplateとのコンテキスト

私は$親を参照するテンプレートにko.renderTemplateを行うと、私はエラーを取得する -オブジェクト「ボブ」に結合することがちょうどです:

NOTE「にReferenceError $の親がが定義されていません」私は "ボブの" $親が必要であることを示しています。私がko.contextFor(要素)を行うことによって、親のViewModelのコンテキストを取得することができますようだが、私は "ボブ" オブジェクトのコンテキストを必要とする...

JAVASCRIPT:

ko.bindingHandlers.test = { 
     init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 

     var templateId = ko.unwrap(valueAccessor()); 
     console.log(templateId); 
      ko.renderTemplate(templateId, viewModel, {}, element, "replaceChildren"); 
    } 
}; 

var viewModel = function() { 
    this.bob = { 
     name: ko.observable("bob") 
    }; 
    this.numberOfClicks = ko.observable(0); 
    this.registerClick = function(ctx) { 
     console.log(ctx); 
     this.numberOfClicks(this.numberOfClicks() + 1); 
    }; 
}; 

ko.applyBindings(new viewModel()); 

HTML

<div>You've clicked <span data-bind='text: numberOfClicks'>&nbsp;</span> times</div> 
<div data-bind="with:bob"> 
    <span data-bind="test:'testTemplate'"></span> 
</div> 



<script id="testTemplate" type="text/html"> 
<span data-bind="text:name" /> 
<button data-bind="click:$parent.registerClick">CLICK</button> 
</script> 

jsfiddle reproduction here

答えて

2

バインディングコンテキストオブジェクトは、$parentなどが存在します。私はそれを動作させるために、この変更やカップル他のユーザーとjsfiddle例を更新しました

ko.renderTemplate(templateId, bindingContext, {}, element, "replaceChildren"); 

https://jsfiddle.net/g462td77/2/

あなたは ko.renderTemplateに代わりの viewModel bindingContextを渡す必要があります
関連する問題