mvvm - kendo ui mvvm 表行迭代输入标签上没有数据

Question

我正在遍历一个数组以显示表格以及每个表格中的行。

似乎一切都很好，直到第二次迭代(所以问题从显示的第二个表开始)，其中 input是我有两个 td不再显示数据，不是我传递的值，也不是 data-role: switch .

示例代码:

<script type="text/x-kendo-template" id="some-id-table">
# for (var j = 0; j < firstArray.length; j++) { #
    # var item = firstArray[j] #
    <div>
        <h3>#= item.info #</h3>
        # if (item.details.length > 0) { #
            <table id="item#=j#">
                //....                    
                <tbody>
                    # for (var i = 0; i < item.details.length; i++) { #
                        # var detail = item.details[i] #
                        <tr>
                            <td>#= detail.typeCode#</td>
                            <td>
                                <input
                                    id="#=detail.id#"
                                    type="number"
                                    title="" 
                                    min="0"
                                    onkeyup="X.something.viewModel.handleChangeAmount(event, #= j #, #= i #)"
                                    onchange="X.something.viewModel.handleChangeAmount(event, #= j #, #= i #)"
                                    data-idx="#= i #"
                                    data-bind="value: item[#= j #].details[#= i #].amount, 
                                            readonly: item[#= j #].details[#= i #].transit, 
                                            disabled: item[#= j #].details[#= i #].transit, 
                                            attr:{class: item[#= j #].details[#= i #].confirmed ? 'boldTxt' : ''}"
                                />
                            </td>
                            <td>
                                <input
                                    id="#=detail.id#"
                                    type="checkbox"
                                    name="#=i#"
                                    parentIdx="#= j #"
                                    data-role="switch"
                                    data-bind="checked: item[#= j#].details[#= i #].confirmed, 
                                          disabled: item[#= j#].details[#= i #].disableConfirm, 
                                          events: { change: onToggleConfirmChanged }" 
                                >
                            </td>
                            <td>
                                <div
                                   data-actionsheet-context="#= serializeContext(detail) #">
                                    <span>#= detail.positionState #</span>
                                </div>
                            </td>
                        </tr>
                    # } #
                </tbody>
            </table>
        # } else { #
            <div> No item information found. </div>
        # } #
    </div>
# } #

(为了清楚起见，我试图简化代码，可能有错别字，但我希望你明白 input 标签的意义)

额外说明:在 data-bind input 的属性(property)我也尝试引用的标签 detail像这样: value: detail.amount没有成功，所以我可能是 detail第一次迭代后引用中断？ ( # var detail = item.details[i] # ) 其他两列(第一列和最后一列)虽然显示正确。

编辑:更具体地说明 input 出了什么问题|标签，就是数字输入中没有显示金额，第二个输入只是一个复选框(没有正确选中/取消选中)而不是一个开关。

Answer 1

查看第一个输入的模板，生成的 html 将如下所示:

data-bind="value: item[0].details[0].amount,

但是，“项目”似乎不是模板绑定(bind)到的模型的一部分。您可以在模板中创建它，并可以使用它来驱动逻辑并将其值注入(inject)到带有 '#=item#' 的 html 中，但您不能在绑定(bind)声明中使用它。从模板的第一行看，“firstArray”似乎是模型的一部分。因此，我建议您改为使用此 html:

data-bind="value: firstArray[0].details[0].amount,

因此，请尝试在数据绑定(bind)中将 'item' 替换为 'firstArray'。我认为正在发生的是 kendo 开始绑定(bind)渲染的模板，并且由于无效的数据绑定(bind)字符串而在内部某处中断。然后绑定(bind)停止并且您的 html 的其余部分(第二次迭代)没有完成。如果您检查控制台或附加调试器，您可能会看到一些剑道错误。