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>

上記のテンプレートは、以下のようにテーブルにバインドされています。

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

私の問題は alert(lst.length); にあります。1として値を与えていますが、ブラウザではテンプレートを繰り返して12行取得しています。list iam binding の長さが 1 であるため、テンプレート ループが 12 回実行されるのはなぜですか。

4

1 に答える 1

1

テンプレートではforeach、 string に対して a を実行していますCondiotionXml。そのため、テンプレートはその文字列の文字ごとに 1 回レンダリングされます。

foreachアイテムの配列をオプションに渡したいと思うでしょう。配列が最上位オブジェクトである場合は、 を使用$dataして参照できます。

于 2012-12-13T14:27:07.257 に答える