剣道MVVM、私は次のことを実行するページ（下記の該当するコードを）持っているAJAX呼び出し

Question

後に更新されない：

1. ユーザーは、自動補完を選択すると、オートコンプリートテキストボックス 2に値を入力しますオプションを使用すると、2つのドロップダウンリストを入力するためにajaxが呼び出されます
2. 各ドロップダウンリストから値を選択する必要があります
3. 値が両方で選択されると、追加ボタンをクリックするとバインドされたテーブルが更新されます
4. ユーザーは行の追加を削除できます

手順4で追加された行は、オブザーバブルオブジェクトの配列に含まれています。 初めてページが1から5のポイントをロードすると、期待通りに動作します.....

ただし、ユーザーがオートコンプリートボックスに新しい検索を入力してselectイベントを発生させた場合、2度目のajax呼び出し私のビューモデルとUIオブジェクトとの関係が壊れてしまいます。

実行しているコードは同じですので、誰かがこのブレークの周りで2回目の理由を説明してください。これはあなたの問題かどうかを修正する場合、一般的には、私はあなたのAJAXの成功コールバックでの再結合のすべてに対して助言する

<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

わかりません。値を直接割り当てるのではなく、ちょうど.set("OpponentTeams")の場合、それは役に立ちますか？

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

.set()への呼び出しは#a_oppteamsdropdown要素のリフレッシュをトリガする必要があります。