如何将功能分配给 marionette.template答案

【问题标题】：how to assign function to marionette.template如何将功能分配给 marionette.template
【发布时间】：2014-10-18 10:44:15
【问题描述】：

据我所知，marionette.template 接受 jquery selector 或 compiled template string。

如果我按照以下方式编写代码，则可以正常工作

 exports.ProductInfoView=Backbone.Marionette.ItemView.extend({
        domInfo:{
            mainTemplateId:"tagProductListTpl",
            tableTemplateId:"taginfoViewTpl"
        },
        template:commomFunctions.templateCompilation("tagProductListTpl",""),
        onRender:function(){
            this.templatingProductInformation();
        },
        modelEvents:{
            "change:currentJson":"templatingProductInformation"
        },
        templatingProductInformation:function(){
            console.log(this.el);
            //this.el.innerHTML=commomFunctions.templateCompilation(this.ui.mainTemplateId,"");
        }
    });

注意：commonFunctions.templateCompilation() 接受 templateId 作为第一个参数，data 作为第二个参数。它将编译handlebars template 并返回编译后的模板。

如果我将该返回值分配给template，则工作正常。

我想为模板制作数据，所以我将function 传递给template like in the following way.

exports.ProductInfoView=Backbone.Marionette.ItemView.extend({
        domInfo:{
            mainTemplateId:"tagProductListTpl",
            tableTemplateId:"taginfoViewTpl"
        },
        template:function(){
            return commomFunctions.templateCompilation("tagProductListTpl","");
        },
        onRender:function(){
            this.templatingProductInformation();
        },
        modelEvents:{
            "change:currentJson":"templatingProductInformation"
        },
        templatingProductInformation:function(){
            console.log(this.el);
            //this.el.innerHTML=commomFunctions.templateCompilation(this.ui.mainTemplateId,"");
        }
    });

这种方式也可以正常工作，如果你观察我在函数内部硬编码templateId("tagProductListTpl")。但我不想那样。我想像this.domInfo.mainTemplateId 一样使用而不是硬编码。这样就不能正常工作了。

它正在抛出错误。我知道这超出了范围。但是我怎样才能做到这一点。

谁能帮帮我。

谢谢。

【问题讨论】：

标签： javascript backbone.js handlebars.js marionette

【解决方案1】：

我会建议你重写负责模板编译的Marionette.TemplateCache.prototype.compileTemplate。看this的帖子，几乎有同样的问题。

Marionette.TemplateCache.prototype.compileTemplate = function (yourRawTemplate) {
        // In case if template is function
        if (_.isFunction(yourRawTemplate)) {
            return yourRawTemplate;
        } else {
            return Handlebars.compile(yourRawTemplate);
        }
 };

如果你从远程服务器加载模板文件，你还需要重写Backbone.Marionette.TemplateCache.prototype.loadTemplate。这里的例子：

Marionette.TemplateCache.prototype.loadTemplate = function ( templateId ) {
    var template = '',
        templateUrl = 'path_to_your_template/' + templateId + '.html';

    // Loading template synchronously.
    Backbone.$.ajax( {
        async   : false,
        url     : templateUrl,
        success : function ( templateHtml ) {
            template = templateHtml;
        }
    } );

    return template;
};

【讨论】：