Backbone/underscore.js json to template with an each loop

Question

I am doing something wrong with backbone and underscore to echo some data in a template.

I have this php file: (test.php)

<?php
echo '{"data1":"test 1","data2":"test 2"}';
?>

And this template:

<script type="text/template" id="tpl-hello-backbone">
    <% _.each(messageView, function(messageView) { %>
        <%= kroeg %> 
        <%= locatie %>
    <% }); %>
</script>

This is my backbone file:

var MessageModel = Backbone.Model.extend({
    urlRoot : 'test.php'
});

var MessageView = Backbone.View.extend({

    template:_.template($('#tpl-hello-backbone').html()),

    render:function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});

var messageModel = new MessageModel();
var messageView = new MessageView({model:messageModel});
messageModel.fetch({
    success: function () {
        $('#msg').html(messageView.render().el);
    }
});

Now for some reason this echo's:

 test 2 test 1 test 2 test 1 test 2 test 1 test 2 test 1

so 4 times instead of 1.

And also when I make the json longer like this:

<?php
echo '{"kroeg":"test 1","locatie":"test 2"},{"kroeg":"test 1","locatie":"test 2"}';
?>

It echo's nothing at all. What am I doing wrong. I think I dont understand some stuff but I cant find what.

Hope anyone can help me out!

Greetings, Merijn de Klerk

Why you iterate object? You need just output <%= kroeg %> <%= locatie %> — Lesha Ogonkov
– Lesha Ogonkov, Commented Sep 8, 2015 at 20:06
yeah I know. But as I explain in the post I also want it to work with multiple inputs — Merijndk
– Merijndk, Commented Sep 8, 2015 at 23:04

Dmitry JJ · Accepted Answer · 2015-09-08 20:13:38Z

1

Your template will work properly if you pass to this.template() a JSON object as follows: $(this.el).html(this.template({'messageView':[{'kroeg':'test 1','locatie':'test 2'},{'kroeg':'test 5','locatie':'test 6'}]}));

That is, _.each() method expects messageView to be an array:

<script type="text/template" id="tpl-hello-backbone">
    <% _.each(messageView, function(messageView) { %>
        <%= messageView.kroeg %> 
        <%= messageView.locatie %>
    <% }); %>
</script>

answered Sep 8, 2015 at 20:13

Dmitry JJ

1882 silver badges11 bronze badges

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

1 Comment

Merijndk Over a year ago

Hmm yeah that sounds logical. Aldo it still isnt wokring. I dont get an error aswell..

Community · Accepted Answer · 2017-05-23 11:58:05Z

0

First problem in each: it iterate messageView keys, thats why output repeats.

So you have to replace

<% _.each(messageView, function(messageView) { %>
    <%= kroeg %> 
    <%= locatie %>
<% }); %>

With

<%= kroeg %> 
<%= locatie %>

About "longer json". You are trying to render Collection. You need to send data from PHP as array

<?php
    echo '[{"kroeg":"test 1","locatie":"test 2"},{"kroeg":"test 1","locatie":"test 2"}]';
?>

and create class for collection

var MessageCollection = Backbone.Collection.extend({
    model: MessageModel
});

instance it, fetch and render

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Sep 9, 2015 at 6:25

Evgeniy

2,9213 gold badges23 silver badges35 bronze badges

Collectives™ on Stack Overflow

Backbone/underscore.js json to template with an each loop

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related