проблема с привязкой шаблона стука

<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 раз.


person user1551433    schedule 13.12.2012    source источник
comment
Можете ли вы показать нам свою модель просмотра? я думаю, вы должны привязать результат ajax к наблюдаемому (массиву), а не сопоставлять результат непосредственно с моделью представления   -  person chris vietor    schedule 13.12.2012


Ответы (1)


В вашем шаблоне вы делаете foreach в строке CondiotionXml. Итак, ваш шаблон отображается один раз для каждого символа в этой строке.

Вы хотели бы передать массив элементов в параметр foreach. Если ваш массив является объектом верхнего уровня, вы можете использовать $data для ссылки на него.

person RP Niemeyer    schedule 13.12.2012