применить привязки из внешнего файла - PullRequest
Новая
       23

применить привязки из внешнего файла

0 голосов
/ 27 января 2019

У меня есть внешний файл, в котором я хочу разместить свой нокаут, с этим кодом: 

var ViewModel = function () {
var counties = ko.observableArray([]);

this.getCounties = function () {
    $.ajax({
        url: '/Search/ByCounty',
        type: 'GET',
        success: function (data) {
            if (data && data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    var obj = data[i];
                    counties.push(obj.CountyName);
                }
            }
        },
        error: function (error) {
            console.log(error);
        }
    });
};
};

ko.applyBindings(new ViewModel());

Затем на странице просмотра MVC под названием search.cshtml я вызываю приведенный выше код следующим образом: 

<button type="button" class="btn btn-primary" data-bind="click: getCounties">getCounties</button>

Похоже, что это подталкивает все данные в массив, а следующий аспект, который я хотел бы сделать, - это циклическое преобразование округов, вот так: 

<table>
    <thead>
        <tr><th>Counties</th></tr>
    </thead>
    <tbody data-bind="foreach: counties">
        <tr>
            <td data-bind="text: CountyName"></td>
        </tr>
    </tbody>
</table>

Полученная ошибка:

Uncaught ReferenceError: Невозможно обработать привязку "foreach: function () {return counties}" Сообщение: графства не определены

Я не получаю, getCounties вызывается при событии clickтам так не может получить значения из массива?Я думаю, это как-то связано с областью видимости, но я не могу этого понять, я уверен, что есть очень простое объяснение

1 Ответ

0 голосов
/ 27 января 2019

Для привязки к работе countries должно быть свойством объекта, используемого в ko.applyBindings(). В настоящее время вы просто заполняете локальную переменную с именем countries. Измените свой код на: 

var ViewModel = function() {
  var self = this;

  this.counties = ko.observableArray([]);
  this.getCounties = function() {
    $.ajax({
      url: '/Search/ByCounty',
      type: 'GET',
      success: function(data) {
        if (data && data.length > 0) {
          for (var i = 0; i < data.length; i++) {
            var obj = data[i];
            self.counties.push(obj.CountyName);
          }
        }
      },
      error: function(error) {
        console.log(error);
      }
    });
  };
};

ko.applyBindings(new ViewModel());

Внутри обратного вызова ajax success, this относится к объекту jqXHR. Итак, вам нужно сохранить ссылку self на viewModel снаружи и использовать self.counties.push() внутри обратного вызова.

Это все равно не будет отображать страны для вас. Потому что, согласно вашим привязкам, нокаут ищет свойство CountyName внутри каждого countries. Итак, вам нужно нажать на весь объект, как это self.counties.push(obj).

Или,

если вы хотите сохранить countries как строковый массив, вы можете использовать ключевое слово $data для ссылки на текущий country в контексте цикла: 

<tbody data-bind="foreach: counties">
    <tr>
        <td data-bind="text: $data"></td>
    </tr>
</tbody>
...