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