Backbone/Marionette - How to define the correct Region

Question

I've run into an issue which I can't find any documentation on, so I'm unsure if it's possible to do.

I have a backbone application which is running fine and it builds me a list of "wells" based on incoming iq packets to a pubsub node (lets call this backboneApp1).

At the end of the template of this backbone well is the following:

<div class='row' id='row-participants-<%= chatid %>' style='display: none'>
</div>

This is a div which I wish to append a list of participants to (this doesn't exist at the time the document is loaded and the MyApp.start is called).

This list of participants is being built using backbone marionette based on another set of incoming iq packets which lists the participants for a particular chat id (lets call this backboneApp2).

So when defining the region for backbone to use, it's done in two parts.

The first, is where you add the region and define the unique name and the DOM:

MyApp.addRegions({
    participantsContainer... : "#row-participants-..."
})

The second is where you tell backbone to show the view:

MyApp.participantsContainer.show(aParticipantsView);

So in my above scenario, I need to create the region dynamically (where do I do this? can this be done in the initialize for backboneApp1 because I'm passing the chatid into each model in my collection of wells? Or maybe in the pubsub handler function, before I send the data to backbone?).

Then I need to tell backboneApp2 to show() in the correct region based on the chatid, which is where I'm stuck (chatid is also passed, each model in the collection has a participantName value and a chatid value associated with it). Where would I put the second part of defining a region if I'm planning to pass a parameter into it?

Please ask if any further explanation is required.

Thank you.

Kind Regards,

Gary Shergill

EDIT: This seems to be the solution, but I'm unsure how to do it without underscore Backbone: A list of views inside a view

My code:

CREATING PARTICIPANTS ARRAY

var participants = [];
$(iq).find('participants').each(function() {
    var participantsNodes = this.childNodes;
    for (var i = 0; i < participantsNodes.length; i++) {
        var participantAttr = participantsNodes[i].attributes
        var participant = participantAttr[0].nodeValue;
            participants.push({"name": participant, "chatid": chatid});
    }
});

model.set({
    participants : participants,
    chatid : chatid
    ...
});

ITEMVIEW

GroupChatView = Backbone.Marionette.ItemView.extend({
    template : "#template-groupchat",
    tagName : 'div',
    className : 'alert alert-custom',

    initialize: function(){
        this.$el.prop("id", this.model.get("chatid"));
    },

    ...

GROUPCHAT TEMPLATE

<script type="text/template" id="template-groupchat">

    <a id='close-<%= chatid %>' class='close hide' data-dismiss='alert' href='#'>
        &times;
    </a>
    ...
    <div class='row' id='row-participants-<%= chatid %>' style='display: none'>
<!-- CUSTOM CODE SHOULD BE HERE? -->
    </div>

</script>

Answer 1

Solved using underscore to render the collection in the template.