Question

<script type="text/x-jquery-tmpl" id="conditionTemplate"> 
<tr>
<td style="padding-left: 5px;">
    <span data-bind="visible: $index()==0">IF</span>
    <select data-bind="attr: {id: 'ddlJoinOperator_'+ $index() } ,visible: $index()>0" style="width:50px;height:25px;">
        <option value="and">AND</option>
        <option value="or">OR</option>
    </select>
</td>
<td style="padding-left: 25px;">
    <table>
        <tr>
        <td>
            <select data-bind="attr: {id: 'ddlleftparam_'+ $index() }" style="width:50px;height:25px;">
                <option value="(">(</option>
                <option value=" "></option>
            </select>
        </td>
        <td style="padding-left: 30px;">
            .Answer
            <select data-bind="attr: {id: 'ddloperator_'+ $index() }" style="width:50px;height:25px;">
                    <option value="==">==</option>
                    <option value="!=">!=</option>
                    <option value="In">In</option>
                    <option value="Not In">Not In</option>
            </select>
        </td>
         <td style="padding-left: 5px;">
            <select data-bind="attr: {id: 'ddlOptions_'+ $index() }" style="width:240px;height:25px;">
            </select>
         </td>
        <td style="padding-left: 5px;">
            <select data-bind="attr: {id: 'ddlRightParam_'+ $index() }" style="width:50px;height:25px;">
                <option value=")">)</option>
                <option value=" "></option>
            </select>
         </td>
        <td style="padding-left: 5px;">
             <input type="button" data-bind="attr: {id: 'btnAdd_'+ $index() }">
         </td>
    </tr>
    </table>
</td>
<td>
    <input type="button" data-bind="attr: {id: 'btndelete_'+ $index() },visible: $index()>0">
</td>
</tr>
</script>

上面的模板绑定到表格如下。

  <table id="tblConditions" data-bind="template: {name:'conditionTemplate', foreach: 'CondiotionXml'}">
        </table>


$(function () {
    $.ajax({
        url: "/api/BranchSurvey/GetBranchLogicConditions",
        success: function (lst) {
            alert(lst.length);
            BranchSurveyViewModel = ko.mapping.fromJS(lst);
            ko.applyBindings(BranchSurveyViewModel, document.getElementById('tblConditions'));
            return false;
        }
    });
});

我的问题是警报（lst.length）;给出值为1.但在浏览器中我得到12行重复模板。由于列表iam绑定的长度为1，因此模板循环运行的次数为12倍。

Answer 1

在模板中，您在字符串foreach上执行CondiotionXml。因此，您的模板将为该字符串中的每个字符渲染一次。

您可能希望将项目数组传递给foreach选项。如果您的数组是顶级对象，则可以使用$data来引用它。

敲模板绑定问题

1 个答案: