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

Question

给定映射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>

这似乎相当不优雅,我怀疑(希望)有一个更优雅,相当直接的选择.

任何想法将非常感谢并感谢阅读.

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/

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

• 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