加载到集合车型在Backbone.js的 [英] Loading collections into models in backbone.js
问题描述
下面是我们的目标：
我有一个父模式。这是一个被称为集合家长。在父是儿童的集合。所以，当我实例化家长收藏，我得到的父模型，每一个<$ C $的集合C>孩子在其中。
我试过这样做几种不同的方式，而我得到不同的表现。有时孩子显示不出来的。有时，他们重复了母公司的每一次迭代渲染循环。我正在寻找的最佳实践是什么，这样的帮助。
儿童的名单不应该改变，应该每次是相同的集合。我能为不同过滤后，在飞行。
我已经剥离下来尽可能直接拔掉数据那样简单，包括没有其他额外要清楚需要做些什么。
我加载孩子收集两次。 （当然，很多的，但我们也曾经在父收集，一次在每个父模型）。这是这样，我可以添加一个新的'家长'，并有机会获得孩子，所以我可以在保存前将其添加到父的模式。
问题：
- 如何确保在
孩子装入父
只有一次？ - 如何有一个
孩子集加载到家长
收藏？ - 这是这样做的正确方法？
模型：
$（函数（）{
window.Child = Backbone.Model.extend（{}）;
window.Children = Backbone.Collection.extend（{
型号：儿童
}）;
window.Parent = Backbone.Model.extend（{
初始化：功能（）{
this.children =新的儿童（）;
children.fetch（）;
}
}）;
window.Parents = Backbone.Collection.extend（{
型号：家长
初始化：功能（）{
this.childrenAll =新的儿童（）;
this.childrenAll.fetch（）;
}
}）;
//实例集合
window.parents =新的父母（）;
}）;
我的看法：
$（函数（）{
window.ChildView = Backbone.View.extend（{
产品类别：子项
模板：_.template（$（'＃儿童模板）HTML（）。）
初始化：功能（）{
_.bindAll（这一点，'渲染'）;
this.model.bind（'变'，this.render）;
}，
渲染：功能（）{
这$ el.html（this.template（this.model.toJSON（）））;
返回此;
}
}）;
window.ChildrenView = Backbone.View.extend（{
产品类别：'孩子'，
模板：_.template（$（'＃儿童模板）HTML（）。）
初始化：功能（）{
_.bindAll（这一点，'渲染'）;
this.collection.bind（复位，this.render）;
}，
渲染：功能（）{
。这$ el.html（this.template（））;
this.collection.each（函数（子）{
VAR视图=新ChildView（{模式：孩子}）;
$（'儿童名单。'）追加（view.render（）EL）。
}）;
返回此;
}
}）;
window.ParentView = Backbone.View.extend（{
产品类别：父，
模板：_.template（$（'＃父模板）HTML（）。）
初始化：功能（）{
_.bindAll（这一点，'渲染'）;
this.model.bind（'变'，this.render）;
}，
渲染：功能（）{
这$ el.html（this.template（this.model.toJSON（）））;
this.children =新的儿童（{集：儿童}）;
$（'儿童名单。'）HTML（this.children.render（）EL）。
返回此;
}
}）;
window.ParentsView = Backbone.View.extend（{
EL：#APP
模板：_.template（$（'＃父母模板）HTML（）。）
初始化：功能（）{
_.bindAll（这一点，'渲染'，'加'）;
this.collection.bind（复位，this.render）;
}，
渲染：功能（）{
。这$ el.html（this.template（））;
this.childrenView =新ChildrenView（{集合：儿童}）;
$（'孩子们新的。'）追加（this.childrenView.render（）EL）。
this.collection.each（函数（父）{
VAR视图=新ParentView（{模式：注}）;
$（'＃项目列表'）prePEND。（view.render（）EL）;
}）;
返回此;
}
}）;
}）;
路由器：
$（函数（）{
window.ParentsRouter = Backbone.Router.extend（{
路线：{
''：'清单'
}，
初始化：功能（）{
//开始通过分配集合到一个变量，以便它可以加载集合
this.parentsView =新ParentsView（{
集合：父母
}）;
parents.fetch（{重置：真}）;
}，
清单：功能（）{
$（'＃应用程序），空（）;
$（'＃应用程序）追加（this.parentsView.render（）EL）。
}
}）; window.parentsRouter =新ParentsRouter（）;
Backbone.history.start（）;
}）;
原来，有几种不同的方式来做到这一点。我选择实例化和渲染子集合在父模式的初始化方法。
Here's the goal:
I have a parent model. It is in a collection called parents. In a parent is a collection of children. So, when I instantiate the parents collection, I get the parent models, each with the collection of children in them.
I've tried doing this several different ways, and I'm getting different performance. Sometimes the children don't show up at all. Sometimes, they are repeated for each iteration of the parent render loop. I'm looking for help on what the best practice is for doing this.
The list of children shouldn't change, it should be the same collection each time. I can filter for differences later, on the fly.
I've stripped it down to be as simple as possible to just pull data, no other extras are included to make it clear what needs to happen.
I load the children collection twice. (Well, lot's of times, but once in the parent collection and once in each parent model). This is so that I can add a new 'Parent' and have access to the children so I can add them to the 'Parent' model before saving.
THE QUESTIONS:
- How to I make sure that the
Childrenare loaded into theParentonly once? - How do I load one
Childrencollection into theParentscollection? - Is this the right way to do this?
Models:
$(function() {
window.Child = Backbone.Model.extend({});
window.Children = Backbone.Collection.extend({
model: Child
});
window.Parent = Backbone.Model.extend({
initialize: function() {
this.children = new Children();
children.fetch();
}
});
window.Parents = Backbone.Collection.extend({
model: Parent
initialize : function() {
this.childrenAll = new Children();
this.childrenAll.fetch();
}
});
// instantiate the collections
window.parents = new Parents();
});
My Views:
$(function() {
window.ChildView = Backbone.View.extend({
className: "child-item",
template: _.template($('#child-template').html()),
initialize: function () {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
window.ChildrenView = Backbone.View.extend({
className: 'children',
template: _.template($('#children-template').html()),
initialize: function() {
_.bindAll(this, 'render');
this.collection.bind('reset', this.render);
},
render: function() {
this.$el.html(this.template());
this.collection.each(function(child) {
var view = new ChildView({ model:child });
$('.children-list').append(view.render().el);
});
return this;
}
});
window.ParentView = Backbone.View.extend({
className: "parent",
template: _.template($('#parent-template').html()),
initialize: function () {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
this.children = new Children({ collection: children });
$('.children-list').html(this.children.render().el);
return this;
}
});
window.ParentsView = Backbone.View.extend({
el: "#app",
template: _.template($('#parents-template').html()),
initialize: function () {
_.bindAll(this, 'render', 'add');
this.collection.bind('reset', this.render);
},
render: function() {
this.$el.html(this.template());
this.childrenView = new ChildrenView({ collection: children });
$('.children-new').append(this.childrenView.render().el);
this.collection.each(function(parent){
var view = new ParentView({ model: note });
$('#items-list').prepend(view.render().el);
});
return this;
}
});
});
The Router:
$(function() {
window.ParentsRouter = Backbone.Router.extend({
routes: {
'': 'list'
},
initialize: function() {
// starts by assigning the collection to a variable so that it can load the collection
this.parentsView = new ParentsView({
collection: parents
});
parents.fetch({ reset: true });
},
list: function () {
$('#app').empty();
$('#app').append(this.parentsView.render().el);
}
});
window.parentsRouter = new ParentsRouter();
Backbone.history.start();
});
Turns out, there are several different ways to do it. I've opted to instantiate and render the child collection in the initialize method of the parent Model.
这篇关于加载到集合车型在Backbone.js的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
