Question

I have html markup ready, which is not going to change, I want to just add/update variables in this markup.

How do I do this using backbone and underscore?

I have tried the following,

Backbone:

testView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },

    render: function(){
        var variables = {reqNumber: 10};
        /*This is where I'm having problems, how do I use only variables in my template??
        * How do I write this next line
        */
        var template = _.template(this.$el.html(), variables);

        this.$el.html(template);
    }
});

var test_view = new testView({ el: $("div.container") });

HTML:

<a href="#">
    <i class="icon-home icon-white"></i> 
    Requests <span class="badge badge-warning"><%= reqNumber %></span>
</a>

Answer 1

Something like this works. The problem was, you didn’t identify where your template was as this.$el points to the view’s container, not the template (see the template script).

JS:

$(function() {
    var testView = Backbone.View.extend({
        initialize: function(){
            this.render();
    },
    render: function(){
        var variables = {'reqNumber': '10'};
        var template = _.template($('#test-templ').html(), variables);

        this.$el.html(template);
   }
   var test_view = new testView({ el: $("div.container") });});
});

HTML:

<script id="test-templ" type="text/html">
    <a href="#">
        <i class="icon-home icon-white"></i> 
        Requests <span class="badge badge-warning"><%= reqNumber %></span>
    </a>
</script>   
<div class="container"></div>