Underscore Template not working with Backbone View

Question

I am not sure why my Underscore Template is not rendering. I would like it to show 3 select drop down menus based on the data returned.

Here's a fiddle to my code. Check the console for the data: http://jsfiddle.net/f7v3g/

If you see the data returned you'll see the following structure

-models

--attributes

---dimensions

----object0

-----name (Will be the text label that appears next to the first drop down menu)

-----refinements (children of refinements should be the option tags)

----object1

-----name (Will be the text label that appears next to the second drop down menu)

-----refinements (children of refinements should be the option tags)

----object2

-----name (Will be the text label that appears next to the third drop down menu)

-----refinements (children of refinements should be the option tags)

Here's the Backbone JavaScript:

(function () {

    var DimensionsModel = Backbone.Model.extend({

        defaults: {
            dimensionName : 'undefined',
            refinements : 'undefined'
        }

    });

    var DimensionsCollection = Backbone.Collection.extend({
        model: DimensionsModel,

        url: 'http://jsonstub.com/calltestdata',

    });

    var setHeader = function (xhr) {
        xhr.setRequestHeader('JsonStub-User-Key', '0bb5822a-58f7-41cc-b8a7-17b4a30cd9d7');
        xhr.setRequestHeader('JsonStub-Project-Key', '9e508c89-b7ac-400d-b414-b7d0dd35a42a');
    };

    var DimensionsView = Backbone.View.extend({
        el: '.js-container',

        initialize: function (options) {
            this.listenTo(this.model,'change', this.render);

            this.model.fetch({
                beforeSend: setHeader
            });

            console.log(this.model);

            return this;
        },

        render: function () {
            this.$el.html( this.template(this.model, 'dimensions-template') );
        },

        template: function (models, target) {
            var templateSelectors = _.template($('#'+target).html(),{
                dimensions: this.model
            });

            return templateSelectors;
        },

    });

    var myCollection = new DimensionsCollection();
    var myView = new DimensionsView({model: myCollection});

}());

Here is my HTML and Underscore template:

<div class="js-container">

    <script type="text/template" id="dimensions-template">
        <% _.each(dimensions, function(dimension,i){ %>

            <%- dimension.get('dimensionName') %> <select id="<%- dimension.get('dimensionName') %>">
                <option>Select</option>
                <%  _.each(dimension.get('refinements'), function(ref,x){ %>
                    <option data-refineurl='{
                        "refinementUrl": "<%- ref.refinementurl %>",
                        "nVal": "<%- ref.nval %>"
                    }'><%- ref.name %></option>
                <% }); %>
            </select>

        <% }); %>
    </script>

</div>

Edit: Spelling and example of data scructure.

Frederic Nault Frederic Nault · Accepted Answer · 2014-03-11T21:10:46

I see few mistake:

1) inside DimensionsView initialize, you should add a this.render call

2) inside template: function (models, target), you use this.models. but you pass models as first parameter ?

3) Did you add model to your collection somewhere? now you template will try to loop over them. So it need models to loop in the collection.

Underscore Template not working with Backbone View

1 Answers