Backbone Marionette和ICanHaz(Moustache)模板配置

时间:2013-01-17 19:45:41

标签: backbone.js requirejs marionette mustache icanhaz.js

我正在将Backbone基本应用程序迁移到Marionette,我想使用ICanHaz.js作为模板系统(基于Mustache)。
我正在使用AMD和Require.js,这是让ICanHaz.js使用它和Backbone的唯一方法就是使用jvashishtha的version

我首先以纯Backbone风格实现了应用程序。
特别是我曾经使用Require.js' text plugin将每个模板作为原始字符串加载,然后将模板添加到ich对象。这将在ich对象中创建一个方法,该方法与加载的模板具有相同的名称:

define([ 
'jquery',
'underscore',
'backbone',
'iCanHaz',
'models/Job',
'text!templates/Job.html'

], function( $, _, Backbone, ich, Job, jobTemplate) {     
    var JobView = Backbone.View.extend({
        render: function () {
             /* since the render function will be called iterativetly  
                at the second cycle the method ich.jobRowTpl has been already defined
                so ich will throw an error because I'm trying to overwrite it.
                That is the meaning of the following if (SEE: https://github.com/HenrikJoreteg/ICanHaz.js/issues/44#issuecomment-4036580)
             */
            if (_.isUndefined(ich.jobRowTpl)){ 
                ich.addTemplate('jobRowTpl', jobTemplate);
            };

            this.el = ich.jobRowTpl(this.model.toJSON());
            return this;
        }
    });
    return JobView;

});

到目前为止一切顺利。问题来自Marionette。
前面的代码在Backbone版本中运行良好,但是没有必要在Marionette的视图中定义渲染函数。
Marionette默认使用UnderscoreJS模板。其他人已经问过how to use Mustache with Marionette 从那个答案,我试图实现我的解决方案。在app.js中:

app.addInitializer(function(){

  //For using Marionette with ICH
  var templateName=''; //not sure if this would help, anyway it makes no difference
  Backbone.Marionette.Renderer.render = function(template, data){
    if (_.isUndefined(ich.template)){ 
          //this defines a new template in ich called templateName
          ich.addTemplate(templateName, template);
    };
    return ich.templateName(data);
  }

但是控制台抛出了我:

Uncaught TypeError: Object #<Object> has no method 'templateName' 

因此模板尚未定义。无论如何,如果我朝着正确的方向提出任何暗示?

1 个答案:

答案 0 :(得分:3)

我认为这只是你的渲染器函数中的JS问题。

这一行:

返回ich.templateName(数据);

将寻找一个字面上称为“templateName”的模板

你想要什么,因为templateName是一个变量,如:

return ich[templateName](data);

然后它将解释templateName变量的值。