ajax调用后kendo mvvm不更新

Posted 2023-05-07

【中文标题】ajax调用后kendo mvvm不更新

【英文标题】：kendo mvvm not updating after ajax call

【发布时间】：2013-01-14 01:13:55

【问题描述】：

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

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

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

但是，如果用户在自动完成框中输入新的搜索并触发 select 事件，那么在第二次进行 ajax 调用时，我的视图模型和 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>

【参考方案1】：

不确定这是否能解决您的问题，但总的来说，我建议不要在您的 ajax 成功回调中重新绑定所有内容。如果您只是 .set("OpponentTeams") 而不是直接分配值，这有帮助吗？

success: function (data) 
    viewModel.set("OpponentTeams", data);
,

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

【讨论】：

伙计，我现在可以给你一个吻。我已经更改了我的设置并将绑定事件移到初始加载事件中。非常感谢。