BackboneJS Отображение нескольких коллекций в одном элементе <ul>

Question

Я хотел бы знать, возможно ли воспроизвести несколько коллекций в одной <ul> -элемент?

например, когда у меня есть несколько представлений, в каждом представлении у меня есть такая коллекция:

Collection = Backbone.Collection.extend({
    url: function() {
        return '/path/to/JSON/file';
    }
});

Теперь я хочу отобразить все коллекции внутри одного <ul> -элемент, чтобы в моем интерфейсе это дало бы мне вывод

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

Это возможно? Если да, то как?

Заранее спасибо...

[РЕДАКТИРОВАТЬ]

Итак, в моем mainView у меня есть:

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

Как упоминалось ранее, каждая коллекция привязана к своему собственному представлению:

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="timeago" datetime="{{pubDate}}"></time>
        {{type}}
    </h3>
</section>
</li>
{{/each}}

Когда я делаю это так, это генерирует 3 <li> -элементы, поэтому структура выглядит так:

<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

Answer 1

Это конечно возможно. Когда вы визуализируете представление коллекции, просто добавьте к элементу контейнера (el или же $el) вместо замены его HTML.