knockout.js - 使用 Knockoutjs 为每个项目选择一个自定义模板

Question

给定一个在 knockout.js 中映射的数组并使用 custom templates ，如何使用不同的模板呈现数组中的每一项？

这里是 an example on jsFiddle 的链接所需的功能 - 有点像人们希望的那样。

简单来说，给定一个这样的数组:

people: ko.observableArray([
    { name: 'Rod', age: 123, template: 'personItem' },
    { name: 'IBM', incorporated: 1911, template: 'corporateItem' },
])

如何设置一个 foreach: 绑定(bind)，它对某些项目使用一个模板，而对其他项目使用不同的模板。

(注意:我知道使用下划线模板在某种程度上混淆了所讨论的问题，对于任何不必要的混淆，我们深表歉意。)

我考虑过将一个模板与一组 if 绑定(bind)一起使用 - 每个模板类型一个，如下所示:

<div data-bind='foreach: people'>
   <div data-bind='if: people.template() == "personItem"'>
   </div>
   <div data-bind='if: people.template() == "corporateItem"'>
   </div>
</div>

这看起来很不优雅，我怀疑(希望)有一个更优雅和相当直接的选择。

如有任何想法，我们将不胜感激并感谢您的阅读。

Answer 1

您实际上可以传递一个函数来确定模板，而不是将字符串传递给 template 绑定(bind)的 name 参数。在您的情况下，您必须将此与使用 foreach 选项结合使用，而不是通过您的项目执行“每个”。

因此，您的 View 模型将如下所示:

var viewModel = {
    people: ko.observableArray([
        { name: 'Rod', age: 123, template: 'personItem' },
        { name: 'IBM', incorporated: 1911, template: 'corporateItem' },
    ]),
    getTemplate: function(item) {
        return item.template;   
    }
};

您的标记如下:

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

<script type="text/html" id="personItem">
        <li>
            <b data-bind="text: name"></b> is <%= age %> years old
        </li>
</script>

<script type="text/html" id="corporateItem">
        <li>
            <b data-bind="text: name"></b> is <%= incorporated %> years old
        </li>
</script>

这是一个例子:http://jsfiddle.net/rniemeyer/xF2xe/

这里有一些额外的引用资料:

• http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html

• http://knockoutjs.com/documentation/template-binding.html#note_4_dynamically_choosing_which_template_is_used