knockout.js - 我可以将 Knockout.js-External-Template-Engine 与嵌套模型一起使用吗？

Question

我正在尝试实现 Knockout.js-外部模板引擎使用嵌套模板的工作演示

目前我有这样的设置

<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 IE

<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>

失败 (无法解析绑定(bind)....foos 未定义)

这是我用 更新的 View 模型使用哪个模板

  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';
    }
};

我确定我错过了这里的重点 - 但我是否需要更改我的 Top Template 数据绑定(bind)表达式

允许加载外部子模板。顶部模板适用于简单的静态文本，因此我认为基本集成是正确的。

谢谢!

Answer 1

找到一个不错的demo它确实做到了这一点。