如何仅使用 Javascript 在 Backbone.js 中引导集合
Posted
技术标签:
【中文标题】如何仅使用 Javascript 在 Backbone.js 中引导集合【英文标题】:How do I bootstrap a collection in Backbone.js using Javascript only 【发布时间】:2012-06-17 17:07:43 【问题描述】:上下文:我正在构建一个需要多个大型参考数据集合才能运行的应用程序。我仅限于 html 和 javascript(包括 JSON)。
问题:我如何在 Backbone.js 中引导一个集合,其中集合对象在服务器上是 JSON 格式并且我只使用 Javascript?
这是我已经知道的:
Backbone.js 引导最佳实践需要 Rails 或其他一些服务器端语言 (http://backbonejs.org/#FAQ-bootstrap)。 大多数 Javascript I/0 操作都是异步的,例如从服务器加载 JSON。 使用 fetch() 引导数据在 Backbone.js 中被认为是一种反模式。 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' 是我的应用程序对象。我可以显示一个微调器,并在填充集合时通过向应用程序对象发送警报来更新加载状态。
【问题讨论】:
【参考方案1】:一种可能的解决方案是让您的视图依赖于fetch
的状态,因此在您的模型/集合完成加载之前它不会被实例化。
请记住,这是一个 Backbone 反模式。使视图依赖于您的集合/模型可能会导致 UI 延迟。这就是为什么推荐的方法是通过直接在页面中内联 json 来引导数据。
但这并不能解决您的情况,您需要在 无服务器 情况下引导数据。使用几行 Ruby/php/etc 将 json 数据动态嵌入页面很容易,但如果您只在 client-side 工作,则使视图依赖于模型是一种方法去吧。
如果您使用 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)保存到模型中的属性中。这样您就可以进行更精细的控制,并且可以在创建视图之前使用deferred object 响应来检查调用状态。
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");
);
【讨论】:
【参考方案2】:fetch
function 接受一个选项参数,该参数可以有一个success
回调:
var itemList = new ItemList;
itemList.fetch(success: function ()
dqApp.trigger('itemList:reset');
);
【讨论】:
【参考方案3】:这可能对你有帮助:http://ricostacruz.com/backbone-patterns/#bootstrapping_data
【讨论】:
这不能回答问题。 Mr The Falcon 正在寻找从服务器加载集合的内容,而不是从脚本/HTML 文件中嵌入的数据。 这就是引导,从嵌入式数据中加载集合,而不使用 fetch()。 我还是一头雾水。您首先从哪里获取这些数据以便将其嵌入到脚本/HTML 中?您不必对数据库服务器进行 REST-ful 调用吗?以上是关于如何仅使用 Javascript 在 Backbone.js 中引导集合的主要内容,如果未能解决你的问题,请参考以下文章
如何仅使用 Javascript 在 Backbone.js 中引导集合
如何使用 VueJS 或仅使用 javascript 在多维数组中搜索
如何使用 JavaScript 在 Google Maps API 中仅获取一个标记