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:绑定，为一些项目使用一个模板，为其他项目使用不同的模板。

（注意：我知道使用下划线模板会对问题产生混淆，并为任何不必要的混淆道歉。）

我考虑过将一个模板与一组if绑定结合使用 - 每个模板类型一个，如下所示：

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

这看起来很不优雅，我怀疑（希望）有一个更优雅，更直接的选择。

任何想法都会非常感激＆amp;谢谢你的阅读。

Answer 1

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

因此，您的视图模型如下所示：

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/

以下是一些其他参考资料：

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

1 个答案: