Insert data into template loaded with require.js

Question

I'm pretty new to Backbone.js and Require.js. In my app I'm loading templates into each module via require (using the text! plugin), just as follows:

define([
'jQuery',
'Underscore',
'Backbone',
'API',
'Utils',
'text!templates/home/register.html'
], function($, _, Backbone, api, utils, registerTpl){
       var registerView = Backbone.View.extend({
           el: $("#content"),
           render: function(){
               this.el.html(registerTpl);
           },
           {...}

I don't know how to bind data models or directly load data into my templates as shown in the backbonetutorials.com examples, something like this:

{...}
render: function(){
        //Pass variables in using Underscore.js Template
        var variables = { search_label: "My Search" };
        // Compile the template using underscore
        var template = _.template( $("#search_template").html(), variables );
        // Load the compiled HTML into the Backbone "el"
        this.el.html( template );
},
{...}
<script type="text/template" id="search_template">
<!-- Access template variables with <%= %> -->
<label><%= search_label %></label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>

Any insight, tip or code snippet will be appreciated.

Ingro Ingro · Accepted Answer · 2012-10-05T12:57:42

Well that's simple, in the tutorial it takes the template data directly from the DOM while you pass it as reference with require js.

You can just do something like this:

template = _.template(registerTpl),

render: function(){
        var variables = { search_label: "My Search" };
        this.el.html(this.template(variables));
        return this;
},

Instead, if you want to use your model's data with your template:

this.el.html(this.template(this.model.toJSON()));

Insert data into template loaded with require.js

1 Answers