केन्डो MVVM ajax कॉल के बाद अपडेट नहीं हो

Question

मैं एक पेज (नीचे प्रासंगिक कोड) किया जाता है जो निम्नलिखित:

1. उपयोगकर्ता, किसी स्वत: पूर्ण पाठ बॉक्स 2 में एक मूल्य में प्रवेश करती है एक ऑटो पूरा चुनने पर विकल्प, 2 ड्रॉपडाउनलिस्ट
2. उपयोगकर्ता को प्रत्येक ड्रॉपडाउन सूची
3. दोनों से एक मान का चयन करने के लिए आवश्यक है, तो दोनों पर एक मूल्य चुना गया है, वे ऐड बटन पर क्लिक करते हैं और मेरी बाउंड टेबल अपडेट की जाती है
4. उपयोगकर्ता पंक्तियों को जोड़ सकते हैं तालिका में एड

चरण 4 में जोड़े गए पंक्तियां देखने योग्य ऑब्जेक्ट में एक सरणी में निहित हैं। पहली बार पृष्ठ 1 से 5 कार्य अपेक्षित के रूप में लोड करता है .....

हालांकि, यदि उपयोगकर्ता स्वत: पूर्ण बॉक्स में एक नई खोज में प्रवेश करता है और चुनिंदा घटना को सक्रिय करता है, दूसरी बार 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

सुनिश्चित नहीं हैं कि अगर यह आपकी समस्या है या नहीं ठीक कर देंगे, लेकिन सामान्य रूप में मैं अपने ajax सफलता कॉलबैक में फिर से बाध्यकारी सब कुछ के खिलाफ सलाह देंगे। यदि आप सीधे मूल्य निर्दिष्ट करने के बजाय .set("OpponentTeams"), तो क्या वह मदद करता है?

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

.set() करने के लिए कॉल #a_oppteamsdropdown तत्व की एक ताज़ा सक्रिय होना चाहिए।