Невозможно назначить строку Json массива

Question

GetAllCountries извлекает список стран из действия контроллера (MVC). Я не могу выделить страны для выбора элемента (как показано на рисунке вверху). С другой стороны, если я присваиваю значения как model.countries = ["India","USA"];, это сработало. Как назначить возвращаемые значения?

var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model)); 


    function StudentViewModel() { 
     var self = this; 
     self.students = ko.observableArray([]); 
     self.countries =[]; 
     self.editingItem = ko.observable(); 
     self.isItemEditing = function(itemToTest) { 
      return itemToTest == self.editingItem(); 
     }; 
    }; 
    $(document).ready(function() { 
     var url = '/GridDemo/GetAllCountries'; 
     $.ajax({ url: url, success: dataRetrieved, type: 'POST', dataType: 'json' }); 
     var model = new StudentViewModel(); 
     //model.countries = ["India","USA"]; 
     function dataRetrieved(data) { 
      var strCountry = []; 
      for (var i = 0; i<data.length; i++) { 
       strCountry.push(data[i]); 
      } 
      //alert(strCountry); 
      model.countries = strCountry; 

     } 
     // alert(initialData.country); 
     //model.countries = initialData.Countries; 
     model.students(initialData); 
     ko.applyBindings(model); 

    }); 

HTML:

<select class="form-control" data-bind="options: $root.countries, value: 
    Country, visible: $root.isItemEditing($data)"></select> 
<label data-bind="text: Country, visible: !$root.isItemEditing($data)" /> 

Когда я всплывал результат JSon я получил именно: Индия, Америка, Непал.

Действие в контроллере:

public JsonResult GetAllCountries() 
     { 
      var countries = new[] { "India", "America", "Nepal" }; 
      return Json(countries, JsonRequestBehavior.AllowGet); 
     } 

Answer 1

Вы должны сделать свой countries также ko.observableArray

function StudentViewModel() { 
     var self = this; 
     self.students = ko.observableArray(); 
     self.countries = ko.observableArray(); 
     self.editingItem = ko.observable(); 
     self.isItemEditing = function(itemToTest) { 
      return itemToTest == self.editingItem(); 
     }; 
    }; 

И в вашем dataRetrieved вам нужно назначить strCountry к model.countries:

function dataRetrieved(data) { 
    var strCountry = []; 
    for (var i = 0; i<data.length; i++) { 
     strCountry.push(data[i]); 
    } 
    model.countries(strCountry); 
} 

Или вы можете непосредственно push в ваш наблюдаемый массив (documentation):

function dataRetrieved(data) { 
    model.countries.removeAll(); 
    for (var i = 0; i<data.length; i++) { 
     model.countries.push(data[i]); 
    } 
}