CODEWITHSUNDEEP
javascriptbackbone.jsi18next
Wracker
Wracker

Reputation: 619

Using multiple data sources for an underscore template

I'd like to use the i18n (for require.js) library to load my stored strings in resource files based on the user's language. I have used this approach, since I'm using both backbone and require.js in my project.

Let's say this is my template where I'd like to use the translated string.

    <h1><%= test.options.test %></h1> 
    <b> user_ud: <%= data.id %> </b>

The first line is evaluated with the data taken from the resource file. But the second line , is where I'd like to use data from different source.

(default resource file) 

define({
    'root': {
        'options': {
            'test': 'Yellow'
        }
    },
    "en-us": true
});

now there is the part where I'd like to render this to my view. 

define(['underscore', 'backbone', 'models/model', 'templates/template' , 'i18n!nls/resource'], function ( _, Backbone, tModel, template, resource) {
    var TooltipView = Backbone.View.extend({
        el : $('#test'),

        initialize: function(options){
            this.model = new tModel();
        },

        render: function(){
            var $el = this.$el;
                if(template.length != 0){
                    var compiledTemplate = template['test']( resource ) /// loads pre-compiled template ///         
                    $el.html(compiledTemplate);
                }else{
                    console.log(" [e] No template found. ");
                }
            });
        }
    });

    return TooltipView;
});

I'd like to achieve this output: 

<h1> Yellow </h1> 
<b> id: 14 </b>

but I'm not sure how do I put two sources of data into one template.

Upvotes: 0

Views: 86

Answers (1)

Michael Radionov
Michael Radionov

Reputation: 13309

You can wrap resource and model data into a new object, which will become a root object used in template:

var compiledTemplate = template['test']({
  i18n: resource,
  data: this.model.toJSON()
});

And then access them in the template

<h1><%= i18n.test.options.test %></h1> 
<b> user_ud: <%= data.id %> </b>

Upvotes: 1

Related Questions