Question

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

但是，我收到了显示self.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);
  }
}

从敲除值unfined调用ajax函数

2 个答案: