kendo MVVM non aggiorna dopo la chiamata AJAX

Question

Ho una pagina (codice rilevante sotto), che svolge le seguenti:

1. utente inserisce un valore in una casella di testo di completamento automatico 2, Dopo aver selezionato un completamento automatico opzione, viene effettuata una chiamata Ajax per riempire 2 elenchi a discesa
2. L'utente è necessario per selezionare un valore da ogni elenco a discesa
3. Una volta che un valore è stato selezionato su entrambi, fanno clic sul pulsante Aggiungi e la tabella associata viene aggiornata
4. L'utente può rimuovere le righe aggiungere al tavolo

Le righe aggiunte nel passaggio 4 sono contenute in una matrice nell'oggetto osservabile. La prima volta che la pagina carica i punti da 1 a 5 funziona come previsto .....

Tuttavia, se l'utente inserisce una nuova ricerca nella casella di completamento automatico e attiva l'evento di selezione, la seconda volta la chiamata ajax è fatto, la relazione tra il mio viewmodel e gli oggetti dell'interfaccia utente sono interrotti.

Il codice che si sta eseguendo è identico, quindi per favore qualcuno potrebbe far luce sul perché la seconda volta si rompe.

<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

Non sono sicuro se questo risolverà il problema o no, ma in generale vorrei consigliare contro la riaccensione vincolante tutto nella vostra callback successo ajax. Se si semplicemente .set("OpponentTeams") invece di assegnare direttamente il valore, è utile?

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

La chiamata a .set() dovrebbe innescare un aggiornamento dell'elemento #a_oppteamsdropdown.