jquery - jsRender:迭代数组，同时迭代数组

Question

我已经搜索和阅读了一段时间了，但我只是没有明白我错过了什么。我希望你能帮忙。

我有一个包含两个数组的 JSON 数据结构:第一个是客户端列表，第二个是“受影响”客户端列表:

var data = {
    allClients:      [ 
                       {clientId: 1, clientName: "Client One"},
                       {clientId: 2, clientName: "Client Two"},
                       {clientId: 3, clientName: "Client Three"},
                       {clientId: 4, clientName: "Client Four"},
                       {clientId: 5, clientName: "Client Five"},
                       {clientId: 6, clientName: "Client Six"},
                       {clientId: 7, clientName: "Client Seven"},
                       {clientId: 8, clientName: "Client Eight"}
                     ],
    clientsAffected: [ 1, 2, 5, 8 ]
};

我正在使用一个简单的 jsRender 模板来创建一个选择框，并使用 allClients 数组:

<script id="tmpl" type="text/x-jquery-tmpl">
  <select name="clients" id="clients" style="150px;" size=10 multiple>

{{for allClients}}
    <option value="{{:clientId}}">{{:clientId}} - {{:clientName}}</option>
{{/for}}

  </select>

</script>

这工作正常...产生一个简单的选择框。

我想做的(不成功)是将“selected”属性添加到呈现的选项中，以便在我的示例中，在生成控件时选择来自clientsAffected的选项1、2、5和8 。我一直在尝试在现有循环中放入另一个循环，以迭代 clientAffected 数组并将一个值与另一个值进行比较，但我没有取得任何成功。

以前有人这样做过吗？或者您能给我指出一份描述我需要什么的好文档吗？

我创建了一个 jsFiddle 来代表我正在工作的内容:http://jsfiddle.net/LcSn7/17/

还有一个不希望表明我想要走的方向:http://jsfiddle.net/LcSn7/19/

提前致谢!-蒂姆

Answer 1

作为 Jacob 建议的替代方案，这是一种方法，使用辅助函数。 (事实上​​，辅助函数实际上允许条件访问更复杂的逻辑，例如访问循环等):

{{for allClients}}
    <option value="{{:clientId}}" {{:~isSelected(clientId)}}>
        {{:clientId}} - {{:clientName}}
    </option>
{{/for}}

与:

$("#container").html($("#tmpl").render(data, {isSelected: function(id) {
    return $.inArray(id, data.clientsAffected) > -1 ? 'selected="selected"' : ""
}}));

查看 fiddle 的更新版本:http://jsfiddle.net/LcSn7/20/

您可能也对此感兴趣，使用 JsViews:http://www.jsviews.com/#samples/tag-controls/multiselect