Model view controller 主干MVC有条件地使用多个集合
我有一个插件,可以通过ajax从远程源获取数据,也可以从存储在内存中的本地数据源获取数据。将采集数据获取到本地数据视图时遇到问题(采集为空,请参见第53行)。本地数据在集合中可用,因为第37行的console.log显示了数据。来自远程和本地源的数据是具有相同结构/层次结构/值的JSON 如何从本地源获取数据以供视图使用,以便在模板中进行渲染?Model view controller 主干MVC有条件地使用多个集合,model-view-controller,backbone.js,Model View Controller,Backbone.js,我有一个插件,可以通过ajax从远程源获取数据,也可以从存储在内存中的本地数据源获取数据。将采集数据获取到本地数据视图时遇到问题(采集为空,请参见第53行)。本地数据在集合中可用,因为第37行的console.log显示了数据。来自远程和本地源的数据是具有相同结构/层次结构/值的JSON 如何从本地源获取数据以供视图使用,以便在模板中进行渲染? // pluginname $.fn.pluginname = function(options) { var defaults = { sourc
// pluginname
$.fn.pluginname = function(options) {
var defaults = {
source: 'external', // external (fetch data from url) or internal (grab data from memory)
},
settings = $.extend({}, defaults, options);
// define the model
item = Backbone.Model.extend();
// define the collection
items = Backbone.Collection.extend({
model: item,
page: settings.page,
// url to request when fetch() is called
url: function() {
return 'http://www.sample.com/feed.json'
},
parse: function (response) {
return response;
},
// overwrite the sync method to pass over the same origin policy
sync: function (method, model, options) {
var that = this;
var params = _.extend({
type: 'GET',
dataType: 'jsonp',
url: that.url(),
processData: false
}, options);
// remote source of data
if (settings.source == 'remote'){
return $.ajax(params);
// local source of data (data read from memory via $.data)
} else if (settings.source == 'local'){
//return JSON.stringify($('body').data('someid'));
return console.log(JSON.stringify($('body').data('someid'))); // logs data correctly in console
};
}
});
// define the view
itemsView = Backbone.View.extend({
initialize: function () {
console.log('itemsView initialize')
_.bindAll(this, 'render');
// create a collection
this.collection = new items;
// fetch the collection and call render() method
var that = this;
this.collection.fetch({
success: function () {
console.log(that.collection); // fails (returns empty) for json data from local source
that.render();
},
error: function () {
console.log('collection fetch error'); // does not get logged
}
});
},
// define template
template: _.template($('#templateid').html()),
// render function
render: function(){
$(this.el).html(this.template({
items: this.collection.toJSON()
}));
},
});
var app = new itemsView({
// define the el where the view will render
el: $('.'+settings.render_selector+'')
});
}; // ends plugin function
返回JSON:
} else if (settings.source == 'local'){
var json = JSON.stringify($('body').data('someid')));
options.success(json);
};
请阅读“覆盖同步”。sync函数不返回集合,它应该调用options.success(someVarWithFetchedData)。如果我没有弄错的话,$.ajax(params)返回一个jqXHR对象。@GijsjanB远程数据部分工作正常。使用$.data从内存中获取的本地数据在第42行的集合中返回JSON
return console.log(JSON.stringify($('body').data('someid'));//在console中正确记录数据
,但从视图中,console.log(this.collection);//从本地源返回空的json数据
返回空的对象。你说得对。同步应该返回一个jqXHR对象!:)我的错。但这正是当地的问题所在。您必须将数据设置为集合,或者将数据作为选项返回。success(data)。感谢您的回复@GijsjanB。如何将数据设置为集合?或者,在不使用jQuery ajax的情况下,如何将数据作为options.success(data)返回?我只想通过$.data传入存储在内存中的JSON,作为用于视图的集合。我将如何设置该集合?现在,通过上面的代码,该集合可以console.log()处理数据,但是视图初始化正确,但是collection.fetch似乎失败了,没有任何错误。快把我逼疯了哈哈!:)再次感谢@GijsjanB。JSON数据确实经过集合,但视图无法访问它。从itemsView
,此.collection.fetch()
未成功,同时未给出错误消息。有什么想法吗?