backbone.marionette + i18n +车把 [英] backbone.marionette + i18n + handlebars

问题描述

有人可以将这些库合并在一起的例子吗？
包括i18n和木偶的处理程序。

谢谢

解决方案

点backbone.marionette模板来编译hendlebars。
这可以在您的main.js上完成：

  Backbone.Marionette.TemplateCache.prototype.compileTemplate = function rawTemplate）{
 
 return Handlebars.compile（rawTemplate）; 
}; 
  

配置您的应用程序以使用handlebars和i18n：
，这可以在您的配置中完成。 js：

$ $ p $ require.config（{

//使用主应用程序文件初始化应用程序
deps：[main]，

路径：{

libs：../assets/js/libs，
plugins： ../assets/js/plugins，

//库
jquery：../assets/js/libs/jquery，
下划线：../ assets / js / libs / lodash，
backbone：../assets/js/libs/backbone，
marionette：../assets/js/libs/backbone.marionette，
句柄：../assets/js/libs/handlebars，

//插件
文本：../assets/js/plugins/text，
i18n：../assets/js/plugins/i18n，

}，

config：{
//设置i18n的配置
//模块ID
i18n：{
语言环境：'fr-fr'
}
}，

shim：{

m arionette：{
deps：['backbone']，
出口：'Backbone.Marionette'
}，

backbone：{
deps：[ 下划线，jquery]，
出口：骨干
}，

句柄：{
deps：[]，
出口： 把手
}

}
}）;


在您的任何模块上使用它：

< pre $ 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（{

默认值：function（）{
return {
feedUrl：this for for test
};
}

}）;

view = Backbone.Marionette.ItemView.extend（{

模板：Handlebars.compile（tmpl），

模型：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））;
返回此;
}

}）;


}）;


这将获取模板+ i18n文件并渲染

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

Thanks

解决方案

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

这篇关于backbone.marionette + i18n +车把的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！