如何仅使用Javascript在Backbone.js中引导集合
上下文:我正在构建一个应用程序,该应用程序需要几个大型参考数据集合才能运行。我仅限于HTML和Javascript(包括JSON) 问题:如果服务器上的集合对象是JSON格式的,而我只使用Javascript,我如何在Backbone.js中引导集合 这是我已经知道的:如何仅使用Javascript在Backbone.js中引导集合,javascript,backbone.js,backbone.js-collections,Javascript,Backbone.js,Backbone.js Collections,上下文:我正在构建一个应用程序,该应用程序需要几个大型参考数据集合才能运行。我仅限于HTML和Javascript(包括JSON) 问题:如果服务器上的集合对象是JSON格式的,而我只使用Javascript,我如何在Backbone.js中引导集合 这是我已经知道的: Backbone.js引导最佳实践需要Rails或其他一些服务器端语言() 大多数Javascript I/0操作都是异步的,例如从服务器加载JSON 在Backbone.js中,使用fetch()引导数据被认为是一种反模式。
- Backbone.js引导最佳实践需要Rails或其他一些服务器端语言()
- 大多数Javascript I/0操作都是异步的,例如从服务器加载JSON
- 在Backbone.js中,使用fetch()引导数据被认为是一种反模式。fetch()也是一个异步操作李>
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”是我的应用程序对象。我可以通过向应用程序对象发送警报来显示微调器,并在填充集合时更新加载状态 这可能对您有所帮助:接受一个选项参数,该参数可以有一个success
回调:
var itemList = new ItemList;
itemList.fetch({success: function () {
dqApp.trigger('itemList:reset');
}});
一种可能的解决方案是使视图依赖于
fetch
的状态,因此在模型/集合完成加载之前,它不会被实例化
请记住,这是一个主干反模式。使视图依赖于您的集合/模型可能会导致UI延迟。这就是为什么推荐的方法是通过在页面中直接内联json来引导数据
但这并不能解决您需要在无服务器的情况下引导数据的问题。使用几行Ruby/PHP/etc动态地在页面中嵌入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");
});
这并不能回答问题。Falcon先生希望从服务器加载集合的内容,而不是从脚本/HTML文件中嵌入的数据。这就是引导,从嵌入的数据加载集合,而不是使用fetch()。我仍然感到困惑。为了将数据嵌入到脚本/HTML中,您首先从哪里获取数据?您不需要对数据库服务器进行REST-ful调用吗?