requirejs - backbone.marionette + i18n + ハンドルバー

Question

これらのライブラリを組み合わせた例を投稿できますか? i18n とマリオネットのハンドラーを含めます。

ありがとう

Answer 1

backbone.marionette テンプレートをポイントしてヘンドルバーをコンパイルします。これは、main.js で実行できます。

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

        return Handlebars.compile(rawTemplate);
    };

ハンドルバーと i18n を使用するようにアプリを構成します。これは 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"
    }

  }
});

モジュールのいずれかで使用します。

    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;  
    }

   });


});

これにより、テンプレート + i18n ファイルが取得され、レンダリングされます

Answer 2

私はi18n-JSを使用していますが、これはすべてに依存しないため、サーバー側のフレームワーク（Ruby on Railsの場合）およびJavascriptテンプレートエンジン（Haml Coffeeの場合）で使用できます。

次に例を示します。

%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')

したがって、バックボーン側とマリオネット側については何の関係もありません。