从knockout值调用ajax函数未定义

Question

我有一个视图模型在淘汰赛如下。我打算在这里实现的是使ajax调用成为如下所示的可重用函数(并将其包含到单独的js文件中)。

然而，我得到了显示自我的错误消息。没有定义CountryList。如何解决这个问题?

// Working
var ViewModel = function() {
  var self = this;
  self.CountryList = ko.observableArray([]);
  self.LoadCountry = function() {
    $.ajax({
      url: '/api/MyApi',
      type: 'GET',
      dataType: 'json',
      success(data): {
          $.each(data, function (index, value) {
              self.CountryList.push(value);
          });
      }
    });
  }
}
ko.applyBindings(new LoadCountry());
// Not working
function LoadCountryList() {
  $.ajax({
      url: '/api/MyApi',
      type: 'GET',
      dataType: 'json',
      success(data): {
          $.each(data, function (index, value) {
              self.CountryList.push(value);
          });
      }
    });
}
var ViewModel = function() {
  var self = this;
  self.CountryList = ko.observableArray([]);
  self.LoadCountry = function() {
     LoadCountryList();
  }
}
ko.applyBindings(new LoadCountry());

Answer 1

您的LoadCountryList函数在第二个版本中没有对象的概念，它应该操作-即它不知道self是什么，因此错误。简单的解决方案是在调用函数时传入对象:

function LoadCountryList(vm) {
  $.ajax({
      url: '/api/MyApi',
      type: 'GET',
      dataType: 'json',
      success(data): {
          $.each(data, function (index, value) {
              //reference the parameter passed to the function
              vm.CountryList.push(value);
          });
      }
    });
}
var ViewModel = function() {
  var self = this;
  self.CountryList = ko.observableArray([]);
  self.LoadCountry = function() {
     //pass ourselves to the function
     LoadCountryList(self);
  }
}

Answer 2

很明显self.ContryList不存在于您的外部文件中。解决这个问题的一个简单方法是传递一个对适当的"列表"的引用，以便将值压入:

function LoadCountryList(countryList) {
  $.ajax({
      url: '/api/MyApi',
      type: 'GET',
      dataType: 'json',
      success(data): {
          $.each(data, function (index, value) {
              countryList.push(value);
          });
      }
    });
}

和在视图模型中:

var ViewModel = function() {
  var self = this;
  self.CountryList = ko.observableArray([]);
  self.LoadCountry = function() {
     LoadCountryList(self.CountryList);
  }
}