foreach内のカスタム要素はノックアウトのモデルではありません

Question

ノックアウトの新機能カスタム要素用のPOCをビルドしようとしています。

モデルは単純ですが、MainModelにはLinkModelの配列が含まれています。

目標は、各LinkModelオブジェクトの1つのカスタム要素 "settings-view-link"を表示するためにリンクの配列を反復処理することです。

function LinkModel(params) { 
    var self = this; 
    self.name = ko.observable(params.name); 
} 

function MainModel() { 
    var self = this; 
    self.links = ko.observableArray([ 
     new LinkModel({ name: "link1"}), 
     new LinkModel({ name: "link2"}) 
    ]); 
}; 

$(function() { 
    //registration of the custom element 
    ko.components.register('settings-view-link', 
    { 
     viewModel: LinkModel, 
     template: "<div><strong data-bind='text: name'></strong></div>" 
    }); 
    ko.applyBindings(new MainModel()); 
}); 

<div> 
    <ul data-bind="foreach: links"> 
     <p data-bind="text: name"></p> <!-- handled correctly --> 
     <settings-view-link></settings-view-link> <!-- handled not the way I expect--> 
    </ul> 
</div> 

私は何を参照してカスタム要素で、私は$親を使用する必要がある場合ということです。私のデータバインドを期待どおりに動作させること。代わりに

<div><strong data-bind='text: name'></strong></div> 

の

<div><strong data-bind='text: $parent.name'></strong></div> 

を使用すると、Webページ上の私のリンクの名前を表示されます。

私は、カスタム要素内でLinkModelオブジェクトを処理すると思いますが、そうではありませんが、それは何とか「サブモデル」です。 なぜ私は$ parentを使用しなければならないのか誰かが説明できますか？コードは間違っていますがなぜですか？私は実際に私のカスタム要素の中にLinkModelオブジェクトを持つことを期待しています。

どうもありがとう

Answer 1

カスタムコンポーネントがviewModelオプションを指定しているので、ノックアウトはあなたのためにこれのviewmodelの新しいインスタンスを作成します。プロパティを省略すると、ノックアウトによってコンポーネントが指定されたパラメータにバインドされます。

通常、コンポーネントにはビューモデルがありますが、必ずしもそうである必要はありません。コンポーネントはテンプレートだけを指定できます。この場合は、コンポーネントのビューがバインドされているオブジェクトがのparamsは、あなたがバインディングコンポーネントに渡され、そのオブジェクトである

出典：http://knockoutjs.com/documentation/component-binding.html#note-template-only-components

この例では、より良い私が何を意味するか説明するかもしれません。第1のコンポーネントは、インスタンス化され、コンポーネントインスタンスにバインドされるビューモデル関数を指定する。

第2のコンポーネントは、パラメータとして$dataを渡し、基本的にテンプレートとして機能します。新しいビューモデルを自動的に作成したくない場合は、テンプレートバインディングが必要です。それが動作

var instanceCounter = 0; 
 

 
var ViewModel = function() { 
 
    this.nr = instanceCounter++; 
 
} 
 

 
ko.components.register('testComponent1', { 
 
    viewModel: ViewModel, 
 
    template: '<div data-bind="text: nr"></div>' 
 
}); 
 

 
ko.components.register('testComponent2', { 
 
    template: '<div data-bind="text: nr"></div>' 
 
}); 
 

 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 

 
<section> 
 
    <h2>New instance for each component</h2> 
 
    <div data-bind='component: { 
 
    name: "testComponent1" 
 
}'></div> 
 
    <div data-bind='component: { 
 
    name: "testComponent1" 
 
}'></div> 
 
    <div data-bind='component: { 
 
    name: "testComponent1" 
 
}'></div> 
 
</section> 
 

 
<section> 
 
    <h2>Same instance for each component</h2> 
 
    <div data-bind='component: { 
 
    name: "testComponent2", 
 
    params: $data 
 
}'></div> 
 
    <div data-bind='component: { 
 
    name: "testComponent2", 
 
    params: $data 
 
}'></div> 
 
    <div data-bind='component: { 
 
    name: "testComponent2", 
 
    params: $data 
 
}'></div> 
 
</section>