jquery - 嵌套 knockout foreach 模板

Question

我正在尝试嵌套一些 jQuery 模板。我知道 jQuery 有我可以使用的 {{tmp 语法，但这对我不起作用，因为我需要使用 knockout 的 foreach 模板。正如你在下面看到的，我有一个 div 绑定(bind)到第一个脚本标签。这是我的第一个模板，使用 knockout 的 foreach 语法来循环遍历可观察的消息数组。在该模板内，我试图将另一个 div 绑定(bind)到另一个模板，该模板使用 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>

我的 View 模型如下所示:

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>

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