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>

Hi gerf, the code is above for how you normally tell backbone where to add the collection. So where it says MyApp.participantsContainer.show(aParticipantsView);, the participantsContainer is the region to add to. Is there a way to have this region defined by the id of the models? so it only appends to the model in question — Gary
Maybe I am thinking about this wrong? Here is the use case: I use backbone to build a collection of divs each representing one group chat. On change of the participants value passed into the model (where the model is a group chat) I need to update the participant view inside the group chat model view to reflect the new participant list. Does this make sense? — Gary
Regions are probably not what you want to be using for this purpose. If you're creating rows, you'll either want to use a CollectionView or CompositeView. — James Kyle
Looked around a bit more and found this post stackoverflow.com/questions/11209030/… which is pretty much what I am trying to do, render a list inside a model... I have no idea how to do this though for myself as I have never used underscore. Added the relevant code to main post. — Gary

Gary Gary · Accepted Answer · 2014-05-08T10:21:44

0

votes

Solved using underscore to render the collection in the template.

Backbone/Marionette - How to define the correct Region

1 Answers