ajaxを介してリモートソースから、またはメモリに保存されたデータのローカルソースからデータを取得するプラグインがあります。ローカル データのビューにコレクション データを取得する際に問題が発生しています (コレクションは空です。53 行目を参照してください)。ローカル データは、37 行目の console.log がデータを示しているため、コレクションで使用できます。リモートおよびローカル ソースからのデータは、同じ構造/階層/値の JSON です。
テンプレートでレンダリングするために、ローカル ソースからデータをビューで使用できるようにするにはどうすればよいですか?
// 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