0 
<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>

Above template is binding to the table as below.

  <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;
        }
    });
});

My problem is in alert(lst.length); is giving value as 1. but in browser i am getting 12 rows repeating the template. As the length of list iam binding is 1 then why 12 times the template loop running.

4

1 回答 1

1

在您的模板中，您正在foreach对字符串执行 a CondiotionXml。因此，您的模板会为该字符串中的每个字符呈现一次。

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

于 2012-12-13T14:27:07.257 回答