Question

我正在尝试嵌套一些jQuery模板。我知道jQuery有{{tmp语法我可以使用，但这对我不起作用，因为我需要使用knockout的foreach模板。正如您在下面看到的，我有一个绑定到第一个脚本标记的div。这是我的第一个模板，使用knockout的foreach语法循环遍历可观察的消息数组。在该模板中，我试图将另一个div绑定到另一个模板，该模板使用knockout的foreach循环遍历'messages'数组的每个成员中的数组。它不起作用。我收到了javascript错误（比如“期望的标识符”）。我知道我做错了什么？

     <div data-bind="template: {name: 'contactIMSTemplateContent', foreach:messages}"></div>
 <script id="contactIMSTemplate" type="text/html">
    <span class="tabTop">${viewModel.contacts()[$data.contact].name()}</span>
 </script>
             <script id="contactIMSTemplateContent" type="text/html">
    <div class="tabContentIM" >
    <div data-bind="template: {name:'IMSTemplate', foreach:${viewModel.messages()[$data.contact].ims}}" ></div>

    </div>
             </script>
 <script id="IMSTemplate" type="text/html">

      <div class="message"><span class="messageFrom">${viewModel.contacts()[0].name()}</span> ${$data}</div>
 </script>

我的viewmodel看起来像：

var viewModel = {
    contacts: ko.observableArray([new contact("Contact Name", "contact status", "busy", "e@t.com", "url")]),
    messages: ko.observableArray([{
        contact: 0,
        ims: new ko.observableArray(["chat"])
    }])
};

Answer 1

我不确切知道你的viewModel是什么样的，但是这一行会引起一个问题：

<div data-bind="template: {name:'IMSTemplate', foreach:${viewModel.messages()[$data.contact].ims}}" ></div>

在data-bind中，您可以直接使用变量，而不需要使用${语法。此外，在属性的末尾有一个}}，这将导致jQuery模板插件尝试将其解析为标记。如果您需要在数据绑定中放置两个大括号，那么只需在它们之间放置一个空格即可。

Nest knockout foreach模板

1 个答案: