Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

backbone.marionette + i18n + handlebars

Can some one post an example of combining these libraries together? including the handler for the i18n and marionette.

Thanks

like image 427
danikoren Avatar asked Dec 08 '22 22:12

danikoren


2 Answers

point backbone.marionette templates to compile hendlebars. this can be done on your main.js:

Backbone.Marionette.TemplateCache.prototype.compileTemplate = function(rawTemplate) {

        return Handlebars.compile(rawTemplate);
    };

configure your app to use handlebars and i18n: this can be done on your config.js:

require.config({

  // Initialize the application with the main application file
  deps: ["main"],

  paths: {

    libs: "../assets/js/libs",
    plugins: "../assets/js/plugins",

    // Libraries
    jquery: "../assets/js/libs/jquery",
    underscore: "../assets/js/libs/lodash",
    backbone: "../assets/js/libs/backbone",
    marionette: "../assets/js/libs/backbone.marionette",
    handlebars: "../assets/js/libs/handlebars",

    //plugins
    text : "../assets/js/plugins/text",
    i18n : "../assets/js/plugins/i18n",

  },

  config: {
        //Set the config for the i18n
        //module ID
        i18n: {
            locale: 'fr-fr'
        }
    },

  shim: {

     marionette: {
      deps: ['backbone'],
      exports: 'Backbone.Marionette'
    },

    backbone: {
      deps: ["underscore", "jquery"],
      exports: "Backbone"
    },

    handlebars: {
      deps: [],
      exports: "Handlebars"
    }

  }
});

use it on any of your modules:

    define([

    'jquery',
    'underscore',
    'backbone',
    'marionette',
    'handlebars',
    'text!templates/template.html',
    'i18n!nls/your_i18n_text'
],

function($, _,  Backbone, Marionette, Handlebars, tmpl, msg) {

  'use strict';

  var mod = Backbone.Model.extend({ 

         defaults: function() {           
              return {                    
                  feedUrl   : "this is for test"
              };
         }

   });

  view = Backbone.Marionette.ItemView.extend({

    template: Handlebars.compile(tmpl),

    model: new mod(),

    initialize: function() {

        this.tmpl_data = msg;    
        if(msg && this.model)
            this.tmpl_data = _.extend(this.model.toJSON(),msg);
    },

    render: function() {

        var view = this;

        $(this.el).html(this.template(view.tmpl_data));
        return this;  
    }

   });


});

this will fetch templates + i18n files and render

like image 102
danikoren Avatar answered Jan 12 '23 20:01

danikoren


I use i18n-JS, which is everything-agnostic, so you can use it with any server-side framework (Ruby on Rails for me) and any Javascript template engine (Haml Coffee for me).

Here is an example:

%form.form-horizontal
  .modal
    .modal-header
      %button{ class: 'close', data: { dismiss: 'modal' } } ×
      %h3
        = I18n.t(@property.get('name'), scope: 'data_sheets.properties')

    .modal-body
      - unless @property.get('editable')
        %p= I18n.t('data_sheets.you_already_contributed_to_this_property')

So there is nothing to do about Backbone nor Marionette side.

like image 20
Romain Tribes Avatar answered Jan 12 '23 22:01

Romain Tribes