在ajax调用之后kendo mvvm没有更新

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

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

步骤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>
$(document).ready(function () {
        var viewmodel = kendo.observable({
            Teams: <%= Model.Teams %>,OpponentTeams: [],Fixtures: [],addFixture: function (e) {
                var Fixtures = this.get("Fixtures");
                var teamId = $("#a_teamsdropdown").val();
                var teamName = $("#a_teamsdropdown>option:selected").text();
                var oppteamId = $("#a_oppteamsdropdown").val();
                var oppteamName = $("#a_oppteamsdropdown>option:selected").text();

                    this.get("Fixtures").push({
                        TeamFullName: teamName,TeamId: teamId,OppTeamFullName: oppteamName,OppTeamId: oppteamId,OrderIndex: this.get("Fixtures").length,TeamModelName: 'Fixtures[' + this.get("Fixtures").length + '].TeamId',OppModelName: 'Fixtures[' + this.get("Fixtures").length + '].OpponentTeamId'
                    });
            },resetFixture: function(){
                var Fixtures = this.get("Fixtures");
                $.each(Fixtures,function (key,fixture) {
                    Fixtures.splice(0,1);
                });
            }
        });

    opponents = $("#txtBox").kendoAutoComplete({
            minLength: 3,dataTextField: "Name",filter: "contains",dataSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/url/Ajax",type: "POST",data: function () { return { searchText: $("#txtBox").val()} 
                        },complete: function (data) {
                            opponents.list.width(400);
                        }
                    }
                },pageSize: 10,serverPaging: true,serverSorting: true,schema: {
                    total: "count",data: "data",model: {
                        id: "Id",fields: {
                            Id: { editable: false }
                        }
                    }
                }
            }),change: function () {
                this.dataSource.read();
            },select: function (e) {
                $.each(opponents.dataSource.data(),function (index,value) {
                    if (e.item.text() == value.Name) {
                        selectedOpponent = value;
                        $('#Fixture_OpponentTeam_Id').val(selectedOpponent.Id);
                        $('#OpponentName').val(selectedOpponent.Name);
                        $.ajax({
                            url: 'GetopponentTeams',data: { schoolId: selectedOpponent.Id,seasonId: seasonId,sportId: sportsId },type: 'GET',success: function (data) {
                                viewmodel.OpponentTeams = data;
                                kendo.bind($("#fixturesBindable"),viewmodel);
                            },error: function (xhr,ajaxOptions,thrownError) {
                                //alert('Error during process: \n' + xhr.responseText);
                                alert(thrownError);
                            }
                        });
                        return;
                    }
                });
            }

        }).data("kendoAutoComplete");
</script>

解决方法

不确定这是否会解决您的问题,但总的来说,我建议不要重新绑定您的ajax成功回调中的所有内容.如果你只是.set(“OpponentTeams”)而不是直接赋值,这有帮助吗？

success: function (data) {
    viewmodel.set("OpponentTeams",data);
},

对.set()的调用应该触发#a_oppteamsdropdown元素的刷新.