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。我一直试图在现有的循环中添加另一个循环，对clientsAffected数组进行迭代，并将其中一个值与另一个值进行比较，但我没有取得任何成功。

以前有人这样做过吗，或者你能告诉我一份描述我需要什么的好文件吗？

我创建了一个jsFiddle，它代表了我所做的工作：http://jsfiddle.net/LcSn7/17/

还有一个不是这样，希望能显示出我想要走的方向：http://jsfiddle.net/LcSn7/19/

提前谢谢！-Tim

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

请参阅您的小提琴的更新版本：http://jsfiddle.net/LcSn7/20/

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

Answer 2

您不能按-原样使用jsRender，因为它的条件缺少在循环中或针对其他对象进行检查的能力。

除了变量作用域之外，您所拥有的是非常正确的；您需要在{{for}}语句中进行作用域。参见这个问题：“访问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}}>

我的JSFiddle。