Question

我在BackboneJS Display multiple collections in one <ul>-Element之前问过这个问题，但我无法让它工作，我开始变得非常绝望如何合并这3个集合并将它们显示在同一个<ul>？

中

define(['app','backbone','modules/artistInstagram', 'modules/artistTwitter',
'modules/artistFacebook'

], function (App, Backbone, ArtistInstagram, ArtistTwitter, ArtistFacebook) {

    var ArtistSocialMedia = App.module();

    ArtistSocialMedia.View = Backbone.View.extend({
        tagName: 'ul',
        id: 'suptiles',
        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();

        }
    });

    return ArtistSocialMedia;
});

现在，它显然创建了3个视图，但我想将它们合并到一个集合中。请帮忙！

提前致谢...

Answer 1

不要过度思考 - 因为你要定义一个带有动态内容的元素，它应该是它自己的View。这是一个无序列表，因此标记名称必须为<ul>。你所做的只是填写<li>，所以模板不是很复杂。

var collection1 = new WhateverCollection();
var collection2 = new WhateverCollection();
var collection3 = new WhateverCollection();

var ListView = Backbone.View.extend({

    tagName: 'ul',

    render: function(){ 

        // define template
        var templateStr = '<% _.each(collection,function(model){ %>\
                               <li><%- model.name %></li>\
                           <% }); %>';

        // convert to function
        var template = _.template(templateStr);

        // for learning purposes, render each one individually
        var htmlFromFirst = template({ collection: collection1.toJSON() });
        var htmlFromSecond = template({ collection: collection2.toJSON() });
        var htmlFromThird = template({ collection: collection3.toJSON() });

        // set the html
        this.$el.html( htmlFromFirst  + htmlFromSecond + htmlFromThird );

        return this;
    }

});

BackboneJS如何合并集合

1 个答案: