kendo MVVM nie aktualizowanie po wywołaniu ajax

Question

Mam stronę (odpowiedni kod poniżej), który wykonuje następujące:

1. użytkownik wprowadzi wartość w pole tekstowe autouzupełniania 2 Po wybraniu Complete Auto opcja, wywołanie ajax jest wykonywane w celu wypełnienia 2 list rozwijanych
2. Użytkownik jest wymagany do wyboru wartości z każdej listy rozwijanej
3. Po wybraniu wartości w obu kliknięto przycisk Dodaj, a moja powiązana tabela została zaktualizowana
4. Użytkownik może usunąć wiersze dodaj ed do tabeli

Wiersze dodane w kroku 4 są zawarte w tablicy w obserwowalnym obiekcie. Przy pierwszym ładowaniu strony punkty od 1 do 5 działają zgodnie z oczekiwaniami .....

Jednakże, jeśli użytkownik wprowadzi nowe wyszukiwanie w polu automatycznego uzupełniania i uruchomi zdarzenie select, po raz drugi wywołanie ajax jest tworzony, związek między moim obiektem viewmodel a obiektami UI jest zepsuty.

Kod, który jest wykonywany jest identyczny, więc proszę, aby ktoś rzucił nieco światła na to, dlaczego drugi raz się rozejdzie.

<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> 

Answer 1

Nie jestem pewien, czy to rozwiąże problem, czy nie, ale ogólnie odradzam ponowne wiązanie wszystkiego w twoim powracającym wywołaniu sukcesu ajax. Czy po prostu przypisanie wartości bezpośrednio, czy tylko .set("OpponentTeams"), jest pomocne?

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

Wezwanie do .set() powinna wywołać odświeżania elementu #a_oppteamsdropdown.