Data template at backbone.js

Question

Tell me, please, how to create templates in Backbone.js, if there is a nested data.

Data example:

var questions = [
    {
        id: 0,
    question: [
        {
            id: 101,
            text: 'What is your name?',
        },
        {
            id: 102,
            text: 'What is your lastname?',
        },
        {
            id: 103,
            text: 'What is yout sex?',
        },
        {
            id: 104,
            text: 'How old are you?',
        },
    ]
}
];

And the html-code for output:

<div id="qu_0" class="questions"><div>
    <p><input type="radio" rel="question" name="question_0" id="i101" value="101" /><label for="i101">What is your name?</label></p>
    <p><input type="radio" rel="question" name="question_0" id="i102" value="102" /><label for="i102">What is your firstname?</label></p>
    <p><input type="radio" rel="question" name="question_0" id="i103" value="103" /><label for="i103">What is your sex?</label></p>
    <p><input type="radio" rel="question" name="question_0" id="i104" value="104" /><label for="i104">How old are you?</label></p>
    <button type="button" name="next"><b>Answer</b></button>
</div></div>

I understand that I should get something like this:

<script id="questionTemplate" type="text/template">
<div>
    <p><input type="radio" rel="question" name="question_<%= id %>" id="i<%= q.id %>" value="<%= q.id %>" /><label for="i<%= q.id %>"><%= q.text %></label></p>
    <button type="button" name="next"><b>Answer</b></button>
</div>
</script>

But I don't know how to display a nested array of questions in the template. Help me, please.

score 1 · Accepted Answer · answered Sep 27 '13 at 19:07

1

You can loop through an array like this:

<script id="questionTemplate" type="text/template">
    <% for(var question in questions) { %>
        <div id="qu_<%= question.id %>" class="questions"><div>
        <% for(var q in questions,question) { %>
            <p><input type="radio" rel="question" name="question_<%= q.id %>" id="i<%= q.id %>" value="<%= q.id %>" /><label for="i<%= q.id %>"><%= q.text %></label></p>
        <% } %>
        </div></div>
    <% } %>
    <button type="button" name="next"><b>Answer</b></button>
</script>

answered Sep 27 '13 at 19:07

T Nguyen

3,309
2
31
48

Read [Why is using “for…in” with array iteration such a bad idea?](http://stackoverflow.com/q/500504/722238) – fbynite Sep 27 '13 at 20:42
Thanks! I resolved this problem with _.each(): `` – FladeX Sep 28 '13 at 06:36
@fbynite: Use "for...in" is in no way "such a bad idea". It simply has some quirks which good coders should be aware of. In this case, none of those quirks apply. – T Nguyen Sep 28 '13 at 16:06
Your wrong, good coders don't use `for .. in` to iterate an array without good reason. Besides, you have no idea whether FladeX has modified `Array.prototype` properties which will show up in the iteration. Furthermore, when using `for .. in` the order is not specified. In this example, using `for .. in` is just plain wrong. – fbynite Sep 28 '13 at 16:35
You're obviously not going to sleep well unless I say this so... fine, you're right and I'm wrong. Happy? Enjoy your black and white world. – T Nguyen Sep 28 '13 at 21:47

Data template at backbone.js

1 Answers1