knockout.js Наблюдаемый массив, ошибка «Uncaught ReferenceError: невозможно обработать привязку»

Question

Я использую JS Knockout для отображения результатов поиска из API четырех квадратов. У меня есть этот вид модели в моем коде Javascript

var ViewModel = function(){ 

    var self = this; 
    // Foursquare API Call : 

    this.foursquareURL = 'https://api.foursquare.com/v2/venues/search?ll=37.8,-122.4&query=croissant&client_id=CLIENT_ID&client_secret=CLIENT_SECRET'; 

    this.fs_ApiCall = function() 
    { 

    $.getJSON(foursquareURL, function(data){ 

    $foursquareElem.text('Get a croissant'); 

    var venues = data.response.venues; 
     self.venueList = ko.observableArray([]); 

     for (var i=0; i<venues.length; i++){ 
     self.venueList.push ({ 

       name: venues[i].name, 
       lat: venues[i].location.lat, 
       lng: venues[i].location.lng 

     }); 

     } 
     }).error(function() { 
    $foursquareElem.text("No data available"); 
    }); 
    }; 

    }; 

    ko.applyBindings(new ViewModel()); 

Это, как я применить связывание в HTML документ

<div id="foursquare-venues"> 
<ul data-bind= "foreach:venueList"> 
<li id="li-name" data-bind = "text:name"> 

</li> 

</ul> 

неперехваченным ReferenceError: Невозможно обработать связывание «Еогеасп: функция() {return siteList} " Сообщение: meetingList не определен

Я не был уверен, правильно ли я использовал правильный путь вызывать ответ API в API, но сообщение об ошибке кажется, что массив не определен (?) Я не уверен, что здесь происходит не так.

Answer 1

Это связано с тем, что вы вызываете venueList в обратном вызове getJSON, который вызывается после применения привязок.

Вы должны вместо этого сделать:

var ViewModel = function() { 

    var self = this; 
    self.venueList = ko.observableArray([]); // instanciate here 

    // Foursquare API Call : 
    this.foursquareURL = 'https://api.foursquare.com/v2/venues/search?ll=37.8,-122.4&query=croissant&client_id=CLIENT_ID&client_secret=CLIENT_SECRET'; 

    this.fs_ApiCall = function() { 

     $.getJSON(foursquareURL, function(data) { 
      // you might want to clear venueList here 

      $foursquareElem.text('Get a croissant'); 

      var venues = data.response.venues; 

      for (var i = 0; i < venues.length; i++) { 
       self.venueList.push({ 

        name: venues[i].name, 
        lat: venues[i].location.lat, 
        lng: venues[i].location.lng 

       }); 

      } 
     }).error(function() { 
      // and here 
      $foursquareElem.text("No data available"); 
     }); 
    }; 

}; 

ko.applyBindings(new ViewModel()); 

Answer 2

Инстанцировать в observableArray, venueList изначально, так что она может быть доступна в HTML. Дайте код ниже для js.

var ViewModel = function() { 

var self = this; 
self.venueList = ko.observableArray([]); 

this.foursquareURL = 'https://api.foursquare.com/v2/venues/search?ll=37.8,-122.4&query=croissant&client_id=CLIENT_ID&client_secret=CLIENT_SECRET'; 

this.fs_ApiCall = function() 
{ 

    $.getJSON(foursquareURL, function(data) { 
     // you might want to clear venueList here 

     $foursquareElem.text('Get a croissant'); 

     var venues = data.response.venues; 

     for (var i = 0; i < venues.length; i++) { 
      self.venueList.push({ 

       name: venues[i].name, 
       lat: venues[i].location.lat, 
       lng: venues[i].location.lng 

      }); 

     } 
    }).error(function() { 
     // and here 
     $foursquareElem.text("No data available"); 
    }); 
    }; 
}; 

ko.applyBindings(new ViewModel()); 

Также в HTML сделать изменения для текста связывания, как показано ниже: -

<div id="foursquare-venues"> 
    <ul data-bind= "foreach:venueList"> 
     <li id="li-name" data-bind = "text: $data.name"> //Use $data.name instead of using just name. 
     </li> 
    </ul> 
</div> 

Использование text : $data.name вместо использования text : name. См. foreach binding для получения дополнительной информации.