4

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

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

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

谢谢！

4

1 回答 1

1

找到了一个很好的演示来做这件事。

于 2012-08-07T02:10:50.057 回答