如何设置模板布局从html加载通过需求

Question

我使用Marionette为我的应用程序开发。我从routes动态加载控制器。没问题。

一旦控制器加载，它调用适当的布局。例如，loginController调用loginLayout。

我有一个单一的layouts.html，其中我所有的布局嵌套。我正在使用需求并使用:

获取layouts.html

"text!./layouts.html"

，但从layout .html，我不能得到我的模板。我的layout.html是:

    <script type="text/template" id="loginTemplate">
        <section class="login">
            <p>I am only for login purpose</p>
        </section>
    </script>
   <script type="text/template" id="contactTemplate">
    <header>
    </heder>
    <section class="login">
        <p>I am only for login purpose</p>
    </section>
    <footer></footer>
</script>

我正在尝试这样做:

define([
    "jQuery","underscore",
    "backbone","marionette",
    "text!./layouts.html"
    ],
    function($,_,Backbone,Marionette,template){
        var loginLayout = Backbone.Marionette.Layout.extend({
            template:$(template,"#loginTemplate"), //i am not getting the template from layouts.html
            regions:{
                content:'section'
            },
            initialize:function(){
                console.log(this.template)
            },
            render:function(view){
                $(this.content.el).html(view);
            }
        });
        return loginLayout;
    }
);

为什么我不能得到我的模板?正确的方法是什么?有人来帮我吗?

Answer 1

您可以通过将木偶视图模板属性定义为函数而不是字符串来加载模板作为HTML而不是提供DOM标识符。

define([
    'text!templates/my_template.html'
], function(
    Templates
) {
    return Marionette.View.extend({
        template: function(data) {
            return _.template($(Templates).filter("#template_id").html())(data);
        }
    });
});

在my_template.html文件中查找ID为"template_id"的元素，获取该元素的内部HTML，并将其用作模板，传入模板数据。

Answer 2

这里有一个选项:

// This needs to go in some configuration file or something that gets called before your views
_.extend(Marionette.TemplateCache.prototype, {
  constructor: function(templateId, context) {
    this.templateId = templateId;
    this.context = context;
  },
  loadTemplate: function(templateId) {
    var template = Marionette.$(templateId, this.context).html();
    if ( ! template || template.length === 0 ) {
      throw new Error("Could not find template: '" + templateId + "'");
    }
    return template;
  }
});

然后在你的视图中，你可以这样使用它:

var loginLayout = Backbone.Marionette.Layout.extend({
    template:Marionette.TemplateCache.get("#loginTemplate", template),
    regions:{
        content:'section'
    },
    initialize:function(){
        console.log(this.template)
    },
    render:function(view){
        $(this.content.el).html(view);
    }
});

---

另一个选项是只在配置文件中包含layout.hml文件，这样您就不需要在每个文件中调用它:

define([
    "jQuery","underscore",
    "backbone","marionette",
    "text!./layouts.html"
    ],
    function($,_,Backbone,Marionette,template){
        _.extend(Marionette.TemplateCache.prototype, {
            loadTemplate: function(templateId) {
                var template = Marionette.$(templateId, template).html();
                if ( ! template || template.length === 0 ) {
                    throw new Error("Could not find template: '" + templateId + "'");
                }
                return template;
            }
        });
        return Marionette.TemplateCache;
});

那么你就有:

template: '#loginTemplate'

这样做的好处是，您还可以为它添加另一个检查，以检查文档或您希望在模板中找到的任何其他内容。