BackboneJS在< ul> -Element中显示多个集合 [英] BackboneJS Display multiple collections in one <ul>-Element
问题描述
我想知道是否可以在一个< ul> -element中显示多个集合？
<例如当我有多个视图，在每个视图中，我有一个这样的集合：
Collection = Backbone.Collection。 （{
url：function（）{
return'/ path / to / JSON / file';
}
}）;
现在我想在同一个< ul> -element，这样在我的前端就可以输出结果了
< ul>
< li>来自收藏集1的数据< / li>
< li>来自收藏集1的数据< / li>
< li>来自收藏2的数据< / li>
< li>来自收藏2的数据< / li>
< li>来自收藏3的数据< / li>
< li>来自收藏3的数据< / li>
< / ul>
这可能吗？如果是的话，怎么样？
在此先感谢...
好的，所以在我的mainView中有：
艺术家.View = Backbone.View.extend（{
template：'artistchannel'，
beforeRender：function（）{
var artistinstagramCollection = new ArtistInstagram.ArtistInstagramCollection（）;
artistinstagramCollection.artist_id = this.artist_id;
this.insertView（'。socialMedia'，new ArtistInstagram.View（{collection：artistinstagramCollection}））;
artistinstagramCollection.fetch（）;
var artisttwitterCollection = new ArtistTwitter.ArtistTwitterCollection（）;
artisttwitterCollection.artist_id = this.artist_id;
this.insertView（'。socialMedia'，new ArtistTwitter.View（{collection：artisttwitterCollection}） ）;
artisttwitterCollection.fetch（）;
var artistfacebookCollection = new ArtistFacebook.ArtistFacebook采集（）;
artistfacebookCollection.artist_id = this.artist_id;
this.insertView（'。socialMedia'，new ArtistFacebook.View（{collection：artistfacebookCollection}））;
artistfacebookCollection.fetch（）;
如前所述，每个Collection都绑定到它自己的视图：
function（App，Backbone）{
var ArtistInstagram = App.module（）;
ArtistInstagram.View = Backbone.View.extend（{
tagName：'li'，
template：'instagram'，
initialize：function（）{
this.listenTo（this.collection，'all'，this.render）
}，
serialize：function（）{
return this.collection？this.collection.toJSON（ ）：[];
}
}）;
ArtistInstagram.ArtistInstagramCollection = Backbone.Collection.extend（{
url：function（）{
return'/myproject/index.php/api/social_feeds/instagram/'+ this.artist_id;
}
}）;
return ArtistInstagram;
}
上述内容适用于Twitter和Facebook。所以我有3个模块。
然后在模板 artistchannel 中有一个部分，我有： < div class =socialMediaDiv>
< ul class =socialMedia>< / ul>
< / div>
我的HandlebarsJS-HTML模板看起来像：
{{＃each this}}
< li>
< a href ={{link}}target =_ blank>< img src ={{title}}/>< / a>
< section class =ip>
< p> {{description}}< / p>
< h3>
< time class =timeagodatetime ={{pubDate}}>< / time>
{{type}}
< / h3>
< / section>
< / li>
{{/ each}}
当我这样做时，它会生成3 < li> -elements，所以结构如下：
< UL>
< li>
< li>集合1的一些结果< / li>
< li> ...< / li>
< li> ...< / li>
< li> ...< / li>
< / li>
< li>
< li>集合2的一些结果< / li>
< li> ...< / li>
< li> ...< / li>
< li> ...< / li>
< / li>
< li>
< li>集合3的一些结果< / li>
< li> ...< / li>
< li> ...< / li>
< li> ...< / li>
< / li>
< / ul>
我做错了什么？
顺便说一下，我正在使用backbone的 layoutmanager
当然可能。当你渲染集合视图时，只需附加到容器元素（ el 或 $ el ），而不是替换它的html 。
I would like to know if it's possible to diplay multiple collections inside one <ul>-element?
for example when I have multiple views, in each view I have a collection like this:
Collection = Backbone.Collection.extend({
url: function() {
return '/path/to/JSON/file';
}
});
Now I want to display all Collections inside the same <ul>-element so that in my frontend it would give me the output
<ul>
<li>Data from Collection 1</li>
<li>Data from Collection 1</li>
<li>Data from Collection 2</li>
<li>Data from Collection 2</li>
<li>Data from Collection 3</li>
<li>Data from Collection 3</li>
</ul>
Is that possible? If yes then how?
Thanks in advance...
[EDIT]
Ok, so in my mainView I have:
Artist.View = Backbone.View.extend({
template: 'artistchannel',
beforeRender: function() {
var artistinstagramCollection = new ArtistInstagram.ArtistInstagramCollection();
artistinstagramCollection.artist_id = this.artist_id;
this.insertView('.socialMedia', new ArtistInstagram.View({collection:artistinstagramCollection}));
artistinstagramCollection.fetch();
var artisttwitterCollection = new ArtistTwitter.ArtistTwitterCollection();
artisttwitterCollection.artist_id = this.artist_id;
this.insertView('.socialMedia', new ArtistTwitter.View({collection: artisttwitterCollection}));
artisttwitterCollection.fetch();
var artistfacebookCollection = new ArtistFacebook.ArtistFacebookCollection();
artistfacebookCollection.artist_id = this.artist_id;
this.insertView('.socialMedia', new ArtistFacebook.View({collection: artistfacebookCollection}));
artistfacebookCollection.fetch();
Like mentioned before, each Collection is bound to its own view:
function (App, Backbone) {
var ArtistInstagram = App.module();
ArtistInstagram.View = Backbone.View.extend({
tagName: 'li',
template: 'instagram',
initialize: function() {
this.listenTo(this.collection, 'all', this.render)
},
serialize: function() {
return this.collection ? this.collection.toJSON() : [];
}
});
ArtistInstagram.ArtistInstagramCollection = Backbone.Collection.extend({
url: function() {
return '/myproject/index.php/api/social_feeds/instagram/' + this.artist_id;
}
});
return ArtistInstagram;
}
The same above goes for Twitter and Facebook. So I have 3 modules.
Then in the template artistchannel there is a section where I have:
<div class="socialMediaDiv">
<ul class="socialMedia"></ul>
</div>
And my HandlebarsJS-HTML template looks like:
{{#each this}}
<li>
<a href="{{link}}" target="_blank"><img src="{{title}}" /></a>
<section class="ip">
<p>{{description}}</p>
<h3>
<time class="timeago" datetime="{{pubDate}}"></time>
{{type}}
</h3>
</section>
</li>
{{/each}}
When I do it like this it generates 3 <li>-elements, so the structure is like:
<ul>
<li>
<li>some results from collection 1</li>
<li>...</li>
<li>...</li>
<li>...</li>
</li>
<li>
<li>some results from collection 2</li>
<li>...</li>
<li>...</li>
<li>...</li>
</li>
<li>
<li>some results from collection 3</li>
<li>...</li>
<li>...</li>
<li>...</li>
</li>
</ul>
What am I doing wrong??
By the way, I'm using backbone's layoutmanager
It's certainly possible. When you render the collection view, just append to the container element (el or $el) instead of replacing its html.
这篇关于BackboneJS在< ul> -Element中显示多个集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
