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

给定在

knockout.js

中映射并使用的数组，如何使用不同的模板呈现数组中的每个项

这里是一个链接，指向所需功能的一部分-有点像人们希望的那样

简单地说，给定如下数组：

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

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

如何设置一个

foreach:

绑定，对某些项使用一个模板，对其他项使用不同的模板

（注意：我知道下划线模板的使用在某种程度上混淆了问题，对于任何不必要的混淆，我深表歉意。）

我曾考虑过使用一个模板和一组

if

绑定—每个模板类型对应一个，如下所示：

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

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

这似乎很不雅观，我怀疑（希望）有一个更优雅、更直截了当的选择

---

非常感谢阅读。

与其将字符串传递给

模板

绑定的

名称

参数，实际上您可以传递一个函数来确定模板。在您的案例中，您必须将此与使用

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>

岁


岁

以下是一个例子：

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

---

非常感谢您。这是一个非常好的答案，也是一个非常好的例子。作为问题的补充，我注意到不能动态地更改模板类型，正如人们在[ThisJSFIDLE]中所期望的那样（-我想知道这是否可行，或者是否必须删除并替换数组中的一个元素才能更改模板类型。它实际上是在尝试更改模板。但是，当模板点击

incorporated

时，它在运行模板时遇到问题。下面是一个示例，我将其替换为

$data.incorporated

在模板中，因为它将返回null而不是错误。另外，您的会议非常精彩！谢谢，这是一次有趣的会议。