如何将 Handlebars 模板集成到 Marionette View？答案

【问题标题】：How to integrate Handlebars template to Marionette View?如何将 Handlebars 模板集成到 Marionette View？
【发布时间】：2014-11-12 20:32:04
【问题描述】：

在我的应用程序中，我正在使用把手模板插件，我在这里有点困惑，如何将把手模板集成到使用单独模板的木偶项目视图中？

这是我的代码：

define([
    'jquery',
    'underscore',
    'backbone',
    'marionette',
    'hbs!scripts/templates/login/loginTemp'], // this is my handlebars template.
    function ($,_,Backbone,Marionette,loginTemplate) {
        "use strict";
        socialApp = window.socialApp || {};

        socialApp.loginView = Backbone.Marionette.ItemView.extend({
            tagName:'div',
            className:'loginContainer',
            template: '#loginTemplate' //this is template for login alone (from DOM )
        });

        return socialApp.loginView;
    }
);

“loginTemp” - 包含登录模板所需的所有详细信息。

【问题讨论】：

标签： templates backbone.js handlebars.js marionette

【解决方案1】：

您可以覆盖 Marionette.TemplateCache.prototype.compileTemplate 函数以实现所需的行为：

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

【讨论】：

【解决方案2】：

如果您在 Marionette 应用程序中使用区域，例如

socialApp.addRegions({
  loginRegion:'<id of the region>'
})

如果你的模板写在脚本标签内，那么你可以很容易地以这种方式呈现你的模板：

//defining the view
socialApp.loginView = Marionette.ItemView.extend({
  template:Handlebars.compile(document.getElementById('loginTemplate').innerHTML),
  ...
  ...//other code and view logic
});

然后，

var loginView = new socialApp.loginView();  //creating instance of the view
socialApp.loginRegion.show(loginView);  //rendering it inside the region

【讨论】：

【解决方案3】：

我的“Marionette-Handlebars Boilerplate”可能会对您有所帮助：
https://github.com/yuraji/marionette-handlebars-boilerplate

【讨论】：