小编Ben*_*ite的帖子

我有一个页面(下面的相关代码)执行以下操作:

1. 用户在自动完成文本框中输入值2,选择自动完成选项后,将进行ajax调用以填充2个下拉列表
2. 用户需要从每个下拉列表中选择一个值
3. 一旦在两者上选择了一个值,他们点击添加按钮,我的绑定表就会更新
4. 用户可以删除添加到表中的行

步骤4中添加的行包含在可观察对象的数组中.页面第一次加载点1到5按预期工作.....

但是,如果用户在自动完成框中输入新搜索并触发select事件,则第二次调用ajax时,我的viewmodel和UI对象之间的关系就会中断.

正在执行的代码是相同的,所以请有人详细说明为什么第二次破坏这个代码.

<input type="text" id="txtBox" style="width:300px;" />

<div id="fixturesBindable" style="padding:0 !Important;">
<table>
    <thead>
        <tr>
                        <th>Col1</th>
                        <th>Col2</th>
        </tr>
    </thead>

    <tbody data-template="row-template" data-bind="source: Fixtures"></tbody>
</table>

<select id="a_teamsdropdown" data-role="dropdownlist" data-text-field="TeamFullName" data-value-field="Id" data-bind="source: Teams" style="width:200px;"></select>
<select id="a_oppteamsdropdown" data-role="dropdownlist" data-text-field="TeamFullName" data-value-field="Id" data-bind="source: 
OpponentTeams" style="width:200px;"></select>

<button type="button" data-bind="click: addFixture">Add Fixture</button>

<script id="row-template" type="text/x-kendo-template">
<tr>
<td><input type="hidden" id="team"  data-bind="attr: { name: TeamModelName, value: TeamId }" /></td>
<td><input type="hidden" id="oppteam" data-bind="attr: { name: OppModelName, value: OppTeamId }" /></td>
</tr>
</script>

</div>


<script> …