在ajax调用之后kendo mvvm没有更新
发布时间:2020-12-16 02:53:42 所属栏目:百科 来源:网络整理
导读:我有一个页面(下面的相关代码)执行以下操作: 用户在自动完成文本框中输入值 2,选择自动完成选项后,将进行ajax调用以填充2个下拉列表 用户需要从每个下拉列表中选择一个值 在两者上选择一个值后,单击添加按钮,我的绑定表就会更新 用户可以删除添加到表中的行
我有一个页面(下面的相关代码)执行以下操作:
>用户在自动完成文本框中输入值 步骤4中添加的行包含在可观察对象的数组中. 但是,如果用户在自动完成框中输入新搜索并触发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元素的刷新. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |