木偶+ i18n在模板中

pfr*_*ied 1 internationalization backbone.js marionette

我想在我的应用程序中做一些基本的i18n

我将i18n插件(从require.js)加载到我的应用程序并创建了一个目录nls,其中我有几个文件,例如project.js

我在main.js文件中设置了默认位置

config : {
    i18n : {
        locale : 'de-de'
    }
}
Run Code Online (Sandbox Code Playgroud)

我现在想要使用我的视图/模板中的文件.有人可以向我解释这是怎么做到的吗?模板在一个template.js文件中设置

我的看法:

define(['marionette', 'templates', 'i18n!nls/project'], function (marionette, templates, msg) {

    return marionette.CompositeView.extend({
        template : templates.project
    });

});
Run Code Online (Sandbox Code Playgroud)

我的模板:

<div class="container">
    <div class="well">
        <h2>Projects</h2>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

有人可以向我解释如何在我的视图/模板中使用该文件吗?提前致谢!

编辑:

我通过一些尝试和错误找出了解决方案.因为我通过require.js tpl加载模板!插件我不需要编译它们,如果我打电话给他们require('tpl!templates/dashboard.tmpl').我可以简单地传递我加载的i18n文件'i18n!nls/dashboard'.在Marionette中,视图默认呈现,所以我这样做:

define(['marionette', 'templates', 'i18n!nls/dashboard'], function (Marionette, templates, msg) {

    return Marionette.CompositeView.extend({

        template : function () {
            return templates.dashboard(msg);
        },

        initialize : function() {

        }
    });

});
Run Code Online (Sandbox Code Playgroud)

这里有很好的解释i18n插件的文件:http: //requirejs.org/docs/api.html#i18n

我必须一步一步地做,首先我错过了根,然后我想知道为什么我的德语语言环境没有加载,但我只是忘了设置de-de : true在根文件中.现在一切都像魅力一样

dan*_*ren 5

首先,通过require.js将i18文件加载到视图中.我在这个例子中使用了把手模板.

define([
    'marionette',
    'handlebars',
    'text!modules/tableModule/templates/myTmpl.html',
    'i18n!nls/dashboard',
],
function(Marionette, Handlebars, tmpl, locals) { ...
Run Code Online (Sandbox Code Playgroud)

然后使用i18对象编译和加载模板.

var template = Handlebars.compile(tmpl);
this.template = template(locals.myVar);
Run Code Online (Sandbox Code Playgroud)

你也可以去做复杂的组合

  var template = Handlebars.compile(tmpl);  
  var data =_.extend(options, {lang:locals});
  this.template = template(data); 
Run Code Online (Sandbox Code Playgroud)

你的nls文件看起来像这样

define({

    "root": {
         "myVar" : "some text in",
         "canBeAnObjectTo": {
                      "title"   : "my title ",
                      "contact" : "Contact",
            }
Run Code Online (Sandbox Code Playgroud)

你的观点将是这样的:

  <div class="cssClass">
<div class="table-caption pull-left">{{this.myVar}}</div>
  </div>
Run Code Online (Sandbox Code Playgroud)

希望有所帮助