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/

提前致谢！ -Tim

Answer 1

作为雅各布建议的替代方案，这里有一种方法，使用辅助函数。（事实上，辅助函数实际上允许条件访问更复杂的逻辑，例如访问循环等。）：

{{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"' : ""
}}));

查看小提琴的更新版本：http://jsfiddle.net/LcSn7/20/

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

Answer 2

你不能使用jsRender，因为它的条件缺乏检查循环内或其他对象的能力。

除变量范围外，你所拥有的是正确的;你需要在{{for}}语句范围内。请参阅此问题："Access parent item inside a loop in jsrender"。

但如果没有相关条件，则需要重新组织数据。以下是我的建议，首先使用您已有的数据向boolean添加allClients受影响的属性，如下所示：

for (var i = 0; i < data.allClients.length; i++){
    data.allClients[i].affected = (jQuery.inArray(data.allClients[i].clientId, data.clientsAffected) != -1);
}

在jsRender模板中，您可以使用简单的真值条件：

<option value="{{:clientId}}" {{if affected}}selected="selected"{{/if}}>

My JSFiddle.

jsRender：迭代一个数组，同时迭代一个数组

2 个答案: