Backbone.js

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Integration

Backbone.js integration is similar to underscore.js since backbone uses JST templates by default.

To demonstrate some of the capabilities of the integration, we will use the "Backbone Directory" sample application created by Christophe Coenraets.

In our sample integration we will add a mechanism to initialize all JST templates after the tml library has been loaded. Let's modify the main app.js file located in: public/js/app.js

First we add the tml.js library to the index.html file located in: public/index.html

<script src="https://cdn.translationexchange.com/tools/tml/stable/tml.min.js"></script>  

And now we can use the default initialization callback mechanism as follows:

$(document).on("ready", function () {
  tml.init({
    key: "YOUR-PROJECT-KEY",
    source: "directory"
    onLoad: function() {
      directory.loadTemplates(["HomeView", "ContactView", "ShellView", "EmployeeView", "EmployeeSummaryView", "EmployeeListItemView"], function () {
        directory.router = new directory.Router();
        Backbone.history.start();
      });
    }
  });
});

And that's pretty much it. Now we can use the tr method and full power of the TML syntax inside the application's JST templates.

Let's look at the Employee view located in: public/tpl/EmployeeSummaryView.html

<p><img src="pics/<%= firstName %>_<%= lastName %>.jpg" width="160" height="160"/></p>  
<h3><%= firstName %> <%= lastName %></h3>  
<h4><%= tr(title) %></h4>  
<br>  
<table class="table table-striped">  
<% if (managerId) { %>  
  <tr>
    <td><%= tr("Manager:") %></td>
    <td><i class="icon-user"></i> <a href="#employees/<%= managerId %>"><%= managerName %></a></td>
  </tr>
<% } %>  
  <tr>
    <td><%= tr("{user | Joined On}:", {user: {gender: gender}}) %></td>
    <td><i class="icon-calendar"></i> <%= joinedOn %></td>
  </tr>
  <tr>
    <td><%= tr("Office Phone:") %></td>
    <td><i class="icon-home"></i> <%= officePhone %></td>
  </tr>
  <tr>
    <td><%= tr("Cell Phone:") %></td>
    <td><i class="icon-headphones"></i> <%= cellPhone %></td>
  </tr>
  <tr>
    <td><%= tr("Email:") %></td>
    <td><i class="icon-envelope"></i> <a href="mailto:<%= email %>"><%= email %></a></td>
  </tr>
  <tr>
    <td><%=tr("Twitter:") %></td>
    <td><i class="icon-retweet"></i> <a href=""><%= twitterId %></a></td>
  </tr>
</table>

<div class="alert alert-warning">  
  <h4 class="alert-heading"><%=tr("Warning") %></h4>
  <%= tr("The phone numbers, email addresses, and Twitter handlers are fake.") %>
</div>  

image

When we switch the language to Russian, we will see it immediately translated as follows:

image

Notice the use of implied tokens to provide accurate gender-based translations for "Joined On":

image

In this example, we also used a backbone.rtl.css to provide support for the right-to-left languages, like Hebrew.

<% if (tml_current_language().right_to_left) { %>  
  <link href="bootstrap/css/bootstrap.rtl.css" rel="stylesheet" media="screen">
  <link href="bootstrap/css/bootstrap-responsive.rtl.css" rel="stylesheet">
<% } else { %>  
  <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
  <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<% } %>  

image

Sample Application and Source Code

You've read this far! Thank you. You can find the source code for all of the above examples at the following GitHub repository.

https://github.com/translationexchange/tml-js-samples/tree/master/backbone

Follow these steps to get the sample working:

$ git clone https://github.com/translationexchange/tml-js-backbone-samples.git
$ cd tml-js-backbone-samples
$ npm install
$ npm start
$ open "http://localhost:8000"