在KnockoutJS中动态更换模板

在KnockoutJS中动态更换模板

NOTE:
本文来源 Dynamically Changing Templates in KnockoutJS - Knock Me Out
由 赤石俊哉 翻译整理。

在KnockoutJS的1.12版本之后新增了一个很有趣也很有用的特性，那就是可以为template绑定的模板名称传递一个函数。这样的话，就方便了：

• 允许你基于你的视图模型状态来动态渲染一个部分

• 在一个foreach条件里面，允许你使用不同的模板渲染数组中的每个独立的项目。

• 让你在不需要过多在意条件逻辑的情况下，使每种情况的模板简短且可复用。

举一个简单的场景来说，你可能希望一个用户可以在摘要和详细两种显示文章的方式之间切换。
我们的视图模型可以是这样的：

var viewModel = {
    articles: [{
        id: 1,
        title: "Article One",
        content: "Content for article one."},
    {
        id: 2,
        title: "Article Two",
        content: "Content for article two."},
    {
        id: 3,
        title: "Article Three",
        content: "Content for article three."}
                                               ],
    selectedView: ko.observable("summary"),
    selectedArticle: ko.observable()
};

在我们的数据绑定中，我们设置selectedView为可观测的，并且是基于一些单选框的。模板的名字指定不再是一个字符串，而是可以用selectedView来绑定的。
Note: 我们返回一个匿名函数，因为直接为一个可观测的变量设置的绑定，只会在我们不给这个模板绑定传递选项作为对象遍历的时候才生效。我们必须要将foreach或者data传递给这个绑定。

<input type="radio" name="choices" value="summary" data-bind="checked: selectedView" />Summary
<input type="radio" name="choices" value="details" data-bind="checked: selectedView" />Details
<div data-bind="template: { name: function() { return selectedView(); }, foreach: articles }"></div>

现在，我们可以简单的在summary和details两个模式之间切换了。通常来说，在我们可以使用一个拥有条件逻辑的模板为每一个视图之前，我们需要使用visible绑定来隐藏一个或者多个。
当我们开始基于在数组中的每一个项目所关联的事实变换模板的时候，事情就变得又去了。有可能我们还会加入一个edit模式用一个可观测的变量来跟踪选择的文章。
然后，我们的逻辑可能会变得越来越复杂，让我们添加一个用来判断该使用哪个模板的方法吧。

viewModel.selectedArticle = ko.observable();
viewModel.templateToUse = function(item) {
    return item === this.selectedArticle() ? ‘edit’ : this.selectedView();
}.bind(viewModel);

注意，这个方法使用数据项目作为第一个参数。Knockout从foreach的循环中向这个方法传递当前的项目。我们的绑定就像这样了：

<div data-bind="template: { name: templateToUse, foreach: articles }"></div>

现在，这个文章可以动态地显示summary，detail以及根据情况显示edit。