$ componentTemplateNodesを使用してノックアウトネストされたコンポーネントが不正なviewModelになる

Question

ページビューモデルからネストされたコンポーネントのビューモデルにアクセスしようとしています。

これはテンプレートである：

<collapse-panel> 
    <custom-component data-bind="viewModel: $root.customComponentVM"> 
    </custom-component> 
</collapse-panel> 

テンプレート崩壊パネルコンポーネントのカスタム・コンポーネントで

<div class="collapse panel-collapse" data-bind=" 
    template: { nodes: $componentTemplateNodes }"> 
</div> 

、私はカスタムは、以下typescriptですコードを使用して、ビューモデル命名結合加え：

ko.bindingHandlers["viewModel"] = { 
    init: (element: any, 
     valueAccessor:() => KnockoutObservable<any>, 
     allBindingsAccessor: KnockoutAllBindingsAccessor, 
     viewModel: any, 
     bindingContext: KnockoutBindingContext): void => { 
     valueAccessor()(viewModel); 
    } 
}; 

私の問題は、init関数shのviewModelオブジェクトouldはCustomElementVMですが、代わりにCollapsePanelVMを取得します。

これはinitメソッドにブレークポイントを追加するときに私が得るものです：

element    //the expected custom-element 
viewModel   //the incorrect CollapsePanelVM 
ko.dataFor(element) //also returns the incorrect CollapsePanelVM 

私はまた、次の構文を使用してカスタム要素を結合しようとしている：

<div data-bind="component: {name: 'custom-component' ... 

も結合ノックアウトコメント構文も使用する$ componentTemplateNodes：

<div class="collapse panel-collapse"> 
    <!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko --> 
</div> 

私は間違ったviewModelを取得します。私はここで何か間違っているのですか、これはノックアウトのバグですか？おかげさまで

Answer 1

collapse-panelコンポーネントのコンテキストでバインディングハンドラが実行されています。その理由は、がの内部にあるためです。タグのコンテキストは、タグ自体にではなく、タグ自体には適用されません（例えば、ifのバインディングの仕組み - タグは常に存在しますが、その内容はそうではありません）。

バインディングをcustom-componentというコンテキストで実行する場合は、そのバインディングをテンプレートのタグcustom-componentに設定します。

親がコンポーネントのビューモデルを設定できるようにするには、use paramsとする必要があります。

params - コンポーネントに渡されるオブジェクト。通常 これは複数のパラメータを含むキー値オブジェクトであり、コンポーネントのviewmodelコンストラクタによって通常受け取られる です。