2

给定一个映射到knockout.js并使用自定义模板的数组，如何让数组中的每个项目使用不同的模板呈现？

这是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>

这似乎很不优雅，我怀疑（希望）有一个更优雅和相当简单的选择。

任何想法将不胜感激并感谢您的阅读。

4

1 回答 1

15

您实际上可以传递一个函数来确定模板，而不是将字符串传递给绑定的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/

以下是一些额外的参考资料：

于 2012-08-16T02:35:25.567 回答