[英]How do I bootstrap a collection in Backbone.js using Javascript only
上下文:我正在构建一个需要几个大型参考数据集合才能运行的应用程序。 我仅限于HTML和Javascript(包括JSON)。
问题 :如何在Backbone.js中引导集合,其中集合对象在服务器上是JSON格式,而我只使用Javascript?
这就是我所知道的:
这是我到目前为止所提出的:
ItemList = Backbone.Collection.extend({
model: Item,
url: 'http://localhost:8080/json/items.json'
});
var itemList = new ItemList;
itemList.fetch();
itemList.on('reset', function () { dqApp.trigger('itemList:reset'); });
'dqApp'是我的应用程序对象。 我可以显示一个微调器,并在通过向应用程序对象发送警报来填充集合时更新加载状态。
这可能会对你有所帮助: http : //ricostacruz.com/backbone-patterns/#bootstrapping_data
fetch
函数接受options参数,该参数可以有success
回调:
var itemList = new ItemList;
itemList.fetch({success: function () {
dqApp.trigger('itemList:reset');
}});
一种可能的解决方案是使视图依赖于fetch
的状态,因此在模型/集合完成加载之前,它不会被实例化。
请记住,这是一个Backbone反模式。 使视图依赖于您的集合/模型可能会导致UI延迟。 这就是推荐的方法是通过直接在页面中内嵌json来引导数据的原因。
但这并不能解决您需要在无服务器情况下引导数据的情况。 使用几行Ruby / PHP /等动态地将json数据动态地嵌入到页面中很容易,但是如果你只是在客户端工作,那么使视图依赖于模型就可以了。
如果您使用fetch()
加载集合,则可以使用以下内容:
var Model = Backbone.Model.extend({});
var Collection = Backbone.Collection.extend({
model: MyModel,
url: 'http://localhost:8080/json/items.json'
});
var View = Backbone.View.extend({
//code
});
var myCollection = new Collection();
myCollection.fetch({
success: function () {
console.log('Model finished loading'); }
myView = new View();
});
我首选的方法是使用ajax(例如.getJSON
, .ajax
)并将返回的jqXHR对象(或XMLHTTPRequest,如果你不使用jQuery)保存到模型中的属性。 这样,您可以进行更精细的控制,并且可以在创建视图之前使用延迟对象响应来检查调用的状态。
var Model = Backbone.Model.extend({});
var Collection = Backbone.Collection.extend({
model: Model,
status: {},
initialize: function () {
var _thisCollection = this;
this.status = $.getJSON("mydata.json", function (data) {
$.each(data, function(key) {
var m = new Model ( {
"name": data[key].name,
"value": data[key].value,
} );
_thisCollection.add(m);
});
});
}
});
var View = Backbone.View.extend({
console.log( "Creating view...");
//code
});
var myCollection = new Collection();
var myView = {};
myCollection.status
.done(function(){
console.log("Collection successfully loaded. Creating the view");
myView = new View();
})
.fail(function(){
console.log("Error bootstrapping model");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.