1
\$\begingroup\$

I'm mixing chrome.i18n into my templates as templateHelpers with Backbone.Marionette.

templateHelpers: function () {
    return {
        //  Mix in chrome to reference internationalize.
        'chrome.i18n': chrome.i18n,
        instant: this.instant
    };
}

and here's my template:

<% if( instant ) { %>
    <img class="item-thumb" src="http://img.youtube.com/vi/<%= video.get('id') %>/default.jpg" />
<% } else { %>
    <img class="item-thumb" data-original="http://img.youtube.com/vi/<%= video.get('id') %>/default.jpg" />
<% } %>

<span class="item-title" title="<%= video.get('title') %>"><%= video.get('title') %></span>

<span class="item-details">
    <% if( video.get('highDefinition') ) { %>
        <%= chrome.i18n.getMessage('hd') %> · 
    <% } %>
    <span class="item-duration">
        <%= video.get('prettyDuration') %>  
    </span>
</span>

<span class="hover-actions">
    <button class="button-icon playInStream" title="<%= chrome.i18n.getMessage('play') %>">
        <i class="fa fa-play"></i>
    </button>

    <button class="button-icon addToStream" title="<%= chrome.i18n.getMessage('enqueue') %>">
        <i class="fa fa-plus"></i>
    </button>

    <button class="button-icon save" title="<%= chrome.i18n.getMessage('save') %>">
        <i class="fa fa-save"></i>
    </button>
</span>

The number of templates being rendered could well be in the thousands. Would it be greatly more efficient to pass the strings themselves into the template, i.e. call getMessage inside of templateHelpers, or does it not make much of a difference at all? My thought is that since I don't use the rest of chrome.i18n, I shouldn't be serializing it, but I'm not sure if that's the case.

\$\endgroup\$
1
\$\begingroup\$

I doubt performance will take much of a hit by passing chrome.i18n into your templates, but I still don't think you should do it.

Templates should be solely for visualising data where possible, sometimes this requires a small amount of logic, but you should keep it out whenever possible. I would much rather see this:

var i18n = chrome.i18n;

...

templateHelpers: function () {
    return {
        hdMessage: i18n.getMessage('hd'),
        instant: this.instant
    };
}

-

<% if( video.get('highDefinition') ) { %>
    <%= hdMessage %> · 
<% } %>

In the long run this prevents your templates from being cluttered with internationalisation specific code, which will also be useful if you ever need to change the library.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.