knockout.js 可观察数组，错误“未捕获的 ReferenceError：无法处理绑定”答案

【问题标题】：knockout.js Observable array, error "Uncaught ReferenceError: Unable to process binding "knockout.js 可观察数组，错误“未捕获的 ReferenceError：无法处理绑定”
【发布时间】：2016-09-27 04:13:33
【问题描述】：

我正在使用 JS Knockout 来显示来自 Four Square 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: 无法处理绑定“foreach: function (){return avenueList }” 消息：未定义场所列表

我不确定我是否使用了正确的方式在 API 中推送 API 响应，但错误消息似乎表明该数组甚至没有定义 (?) 我不确定这里出了什么问题。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

这是因为您在 getJSON 回调中实例化了 venueList，该回调在应用绑定后调用。

你应该这样做：

  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());

【讨论】：

【解决方案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。

【讨论】：