Javascript knockout.js可观测数组，错误“；未捕获引用错误：无法处理绑定“；_Javascript_Knockout.js

Javascript knockout.js可观测数组，错误“；未捕获引用错误：无法处理绑定“；

javascript knockout.js

Javascript knockout.js可观测数组，错误“；未捕获引用错误：无法处理绑定“；,javascript,knockout.js,Javascript,Knockout.js,我使用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=croissan

我使用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());

var ViewModel=function（）{
var self=这个；
//Foursquare API调用：
这是foursquareURLhttps://api.foursquare.com/v2/venues/search?ll=37.8，-122.4&query=croissant&client_id=client_id&client_secret=client_secret'；
this.fs_ApiCall=函数（）
{
$.getJSON（foursquareURL，函数（数据）{
$foursquareElem.text（'Get a croissant'）；
var场馆=data.response.vinces；
self.venueList=ko.observearray（[]）；
对于（var i=0；i，这是因为您在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());

var ViewModel=function（）{
var self=这个；
self.venueList=ko.observearray（[]）；//在此处实例化
//Foursquare API调用：
这是foursquareURLhttps://api.foursquare.com/v2/venues/search?ll=37.8，-122.4&query=croissant&client_id=client_id&client_secret=client_secret'；
this.fs_ApiCall=函数（）{
$.getJSON（foursquareURL，函数（数据）{
//您可能需要清除此处的venueList
$foursquareElem.text（'Get a croissant'）；
var场馆=data.response.vinces；
对于（变量i=0；i<1.length；i++）{
self.venueList.push({
名称：场馆[i]。名称：，
lat:场馆[i].location.lat，
液化天然气：场馆[i].location.lng
});
}
}).错误（函数（）{
//这里呢
$foursquareElem.text（“无可用数据”）；
});
};
};
应用绑定（新的ViewModel（））；
这是因为您在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());

var ViewModel=function（）{
var self=这个；
self.venueList=ko.observearray（[]）；//在此处实例化
//Foursquare API调用：
这是foursquareURLhttps://api.foursquare.com/v2/venues/search?ll=37.8，-122.4&query=croissant&client_id=client_id&client_secret=client_secret'；
this.fs_ApiCall=函数（）{
$.getJSON（foursquareURL，函数（数据）{
//您可能需要清除此处的venueList
$foursquareElem.text（'Get a croissant'）；
var场馆=data.response.vinces；
对于（变量i=0；i<1.length；i++）{
self.venueList.push({
名称：场馆[i]。名称：，
lat:场馆[i].location.lat，
液化天然气：场馆[i].location.lng
});
}
}).错误（函数（）{
//这里呢
$foursquareElem.text（“无可用数据”）；
});
};
};
应用绑定（新的ViewModel（））；
首先实例化observableArray，venueList
，以便可以在html中访问它
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());

var ViewModel=function（）{
var self=这个；
self.venueList=ko.observearray（[]）；
这是foursquareURLhttps://api.foursquare.com/v2/venues/search?ll=37.8，-122.4&query=croissant&client_id=client_id&client_secret=client_secret'；
this.fs_ApiCall=函数（）
{
$.getJSON（foursquareURL，函数（数据）{
//您可能需要清除此处的venueList
$foursquareElem.text（'Get a croissant'）；
var场馆=data.response.vinces；
对于（变量i=0；i<1.length；i++）{
self.venueList.push({
名称：场馆[i]。名称：，
lat:场馆[i].location.lat，
液化天然气：场馆[i].location.lng
});
}
}).错误（函数（）{
//这里呢
$foursquareElem.text（“无可用数据”）；
});
};
};
应用绑定（新的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>



//使用$data.name，而不仅仅使用name。



使用text:$data.name
而不是使用text:name。
参考更多知识。
首先实例化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());

var ViewModel=function（）{
var self=这个；
self.venueList=ko.observearray（[]）；
这是foursquareURLhttps://api.foursquare.com/v2/venues/search?ll=37.8，-122.4&query=croissant&client_id=client_id&client_secret=client_secret'；
this.fs_ApiCall=函数（）
{
$.getJSON（foursquareURL，函数（数据）{
//您可能需要清除此处的venueList
$foursquareElem.text（'Get a croissant'）；
var场馆=data.response.vinces；
对于（变量i=0；i<1.length；i++）{
self.venueList.push({
名称：场馆[i]。名称：，
lat:场馆[i].location.lat，
液化天然气：场馆[i].location.lng
});
}
}).错误（函数（）{
//这里呢
$foursquareElem.text（“无可用数据”）；
});
};
};
应用绑定（新的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>



//使用$data.name，而不仅仅使用name。



使用text:$data.name
而不是使用text:name。
有关更多知识，请参阅