BackboneJS在一个< ul& gt;元素中显示多个集合 [英] BackboneJS Display multiple collections in one <ul>-Element

问题描述

我想知道是否可以在一个< ul> -element内对多个集合进行二元显示吗?

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';
    }
});

现在，我想在同一个< ul> -元素中显示所有Collection，以便在我的前端将其输出给我

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?

预先感谢...

好，所以在我的mainView中，我有:

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();

就像前面提到的，每个Collection都有自己的视图:

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;
}

Twitter和Facebook同样适用.所以我有3个模块.

然后在模板 artistchannel 中，有一个部分位于我的位置:

Then in the template artistchannel there is a section where I have:

<div class="socialMediaDiv">
    <ul class="socialMedia"></ul>
 </div>

我的HandlebarsJS-HTML模板如下:

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}}

当我这样做时，它会生成3个< li> 元素，因此结构如下:

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>

我在做什么错??

顺便说一句，我正在使用主干的 layoutmanager

By the way, I'm using backbone's layoutmanager

推荐答案

当然有可能.呈现集合视图时，只需追加到容器元素( el 或 $ el )，而不是替换其html.

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& gt;元素中显示多个集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！