Rendering an Array as a List within a Backbone model

Question

This is an extension to another post I found: Backbone: A list of views inside a view

I had trouble understanding this (I've never used underscore before) so I figured it's best to post a new topic about this.

Scenario

I have a model of a group chat which is created and lists a variety of information. This includes a list of the participants in that group chat. I need to display that list as part of the model being rendered.

Code

Creating the 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
    ...
});

The 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"));
    },

    ...

The template being used

    <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? My attempt:
            <% _.each(participants, function () { %>
                 <%= name %>
            <% }); %>
        -->
        </div>

    </script>

This constantly returns an error saying that "name" does not exist. I'm unsure what I'm doing wrong from the original post, I think I'm passing the participants array incorrectly to the underscore.each() part.

mms27 · Accepted Answer · 2014-05-07 10:56:07Z

2

I feel like one of the issues is that you do not pass any arguments to _.each method.

<% _.each(participants, function (participant) { %>
   <%= participant.name %>
<% }); %>

Hope it will fix your problem.

answered May 7, 2014 at 10:56

mms27

8267 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gary Over a year ago

Great one, thanks! Didn't realise I had to use participant.name (the original post I linked doesn't do that).

Gary Over a year ago

I was looking at underscorejs.org/#each, wasn't able to suss out this issue from it though. Need to start reading up on underscore properly, you can do some pretty neat stuff with it.

akshaykumar6 · Accepted Answer · 2014-05-07 10:57:19Z

2

The correct way of using _.each function will be :

<% _.each(participants, function (element,index) { %>
           <%= element.name %>
<% }); %>

answered May 7, 2014 at 10:57

akshaykumar6

2,2774 gold badges19 silver badges31 bronze badges

1 Comment

Gary Over a year ago

Great one, thanks! Didn't realise I had to use element.attribute (the original post I linked doesn't do that).

Collectives™ on Stack Overflow

Rendering an Array as a List within a Backbone model

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related