0

我有一个页面，我想更改用于显示项目列表的模板（例如简单视图与高级视图）。示例代码：

<script type="text/html" id="template1">
    Template 1
</script>

<script type="text/html" id="template2">
    Template 2
</script>

<input type="checkbox" data-bind="checked: viewSelect"/>
<button data-bind="click: newArray">Refresh Array</button>
<ul data-bind="template:{name: templateBinding, foreach: items}">
</ul>

JS：

var ViewModel = function(){
    var self = this;

    this.viewSelect = ko.observable();

    this.newArray = function(){
        console.log("newArray");
        self.items([{text:"Item1"},{text:"Item2"},{text:"Item3"}]);
    };

    this.templateBinding = ko.computed(function(){
        console.log("templateBinding");
        if(self.viewSelect()){
            return "template1";
        } else{
            return "template2";
        }
    });

    this.items = ko.observableArray([{text:"Item1"},{text:"Item2"},{text:"Item3"}]);
};

ko.applyBindings(new ViewModel());

我用这段代码创建了一个小提琴。

以下是正在发生的事情：我希望 Knockout 在模板更改时重新创建显示的列表。调用了computedhooked to templateBinding（这可以从控制台确认），但模板没有改变，切换复选框不会改变显示。但是，对数组内容的更改确实会使用新模板刷新列表。

有没有一种优雅的方法可以做到这一点，还是我做错了什么？

4

1 回答 1

2

当为 foreach 中的项目使用动态模板名称时，您需要指定要执行的函数。这将为每个项目调用（并将该项目作为第一个参数传递）。

因此，您可以将当前代码更改为：

this.getTemplate = function(){
    if(self.viewSelect()){
        return "template1";
    } else{
        return "template2";
    }
};

并绑定如下：

<ul data-bind="template:{name: getTemplate, foreach: items}">

这是一个更新的小提琴：http: //jsfiddle.net/rniemeyer/qAEXh/

于 2013-10-17T17:03:35.457 回答