ネストされたテンプレートの動作デモを使用してKnockout.js-External-Template-Engineを実装しようとしています
現在、私はそのようなセットアップを持っています
<ul data-bind="template: {name: 'TopTemplate'}"></ul>
<script type="text/html" id="TopTemplate">
<li><span>Result</span>
<ul data-bind=" template: {name: 'FooTemplate' , foreach: foos}">
</ul>
</li>
<button data-bind='click: addFoo'>Add Foo</button>
</script>
この TopTemplate をファイル (templates\view.html) に移動しようとすると、 view.htmlつまり
<li><span>Result</span>
<ul data-bind=" template: {name: 'FooTemplate' , foreach: foos} " style="list-style-type:circle;margin-left:15px">
</ul>
</li>
<button data-bind='click: addFoo'>Add Foo</button>
失敗します(バインディングを解析できません....foos が定義されていません)
これがwhichTemplateToUseで更新された私のビューモデルです
var viewModel = {
isEditable: ko.observable(false),
foos: ko.mapping.fromJS([]),
loadInitialData: function () {
ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos);
},
loadUpdatedData: function () {
ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos);
},
whichTemplateToUse: function() {
return viewModel.isEditable() ? 'edit' : 'view';
}
};
ここでポイントを逃したと確信していますが、トップテンプレートのデータバインド式を変更する必要がありますか?
外部サブテンプレートの読み込みを許可します。一番上のテンプレートは単純な静的テキストで動作するので、基本的な統合は正しいと思います。
ありがとう！