创建模板答案

【问题标题】：Creating a template创建模板
【发布时间】：2014-07-02 10:54:06
【问题描述】：

knockoutjs 中有没有办法创建一个淘汰模板，但根据传递给它的值注入更多的 HTML。

例子：

<script type="text/html" id="userMessageTemplate">
    <div class="chatContent">
        <span data-bind="text: userName"></span>
        <span data-bind="text: userMessageAlert "></span>
    </div>
</script>

此模板当前有两个 span 标签，每个标签分别绑定到模型中的 userName 和 userMessgeeAllert 属性。

现在我决定在其他地方使用这个模板，但我希望它绑定到 orderNo 而不是 userName，并添加另一个名为 Address 的 span 标签：

<script type="text/html" id="userMessageTemplate">
    <div class="chatContent">
        <span data-bind="text: OrderNo"></span>
        <span data-bind="text: userMessageAlert "></span>
        <span data-bind="text: Address "></span>
    </div>
</script>

目前我只想创建另一个如上所述的模板。但我想注入值，并根据这些值动态创建一个模板：

function (orderNo, userMessageAllert,Address)
{
// now based on the values create template 
}

【问题讨论】：

您的模板没有太多共同点。为什么不创建两个模板？它会更简单，更容易阅读
避免创建大量模板的需要。解决方案我必须创建一个 javascript createTemplateFunction 接受值，例如地址，订单号。然后有一些代码为每个值创建一个跨度标签，设置它的数据绑定属性
好吧，你可以使用if 绑定，它仍然更具可读性

标签： knockout.js

【解决方案1】：

在这种情况下，您可以通过将一组属性传递给模板并使用 foreach 绑定来修复它。

<script type="text/html" id="userMessageTemplate">
    <div class="chatContent" data-bind="foreach: $data">
        <span data-bind="text: $data"></span>
    </div>
</script>

一般来说，我会看看Knockout components。尚未推出，但很快就会推出，它允许您将数据传递到您的模板中，它可以智能地响应。

【讨论】：