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

Question

我正在尝试使用嵌套模板的工作演示来实现 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';
    }
};

我确定我错过了这里的重点 - 但我是否需要更改我的顶级模板数据绑定表达式

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

谢谢！

Answer 1

找到了一个很好的demo，它可以做到这一点。