0

我正在使用Marionette我的应用程序开发。我正在从动态加载控制器routes。工作正常。

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

我有一个layouts.html，我所有的布局都嵌套在其中。我正在使用 requirejs 并layouts.html使用：

"text!./layouts.html"

但是从 layouts.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;

    }
);

为什么我无法获得我的模板？得到它的正确方法是什么？有人帮帮我吗？

提前致谢。

4

2 回答 2

1

通过将 Marionette 视图模板属性定义为函数而不是字符串，您可以将模板加载为 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 并将其用作模板，并传入模板数据。

于 2016-09-30T02:15:07.220 回答
0

这是一个选项：

// 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'

这样做的好处是您还可以对其进行另一次检查，以检查文档或您希望在其中找到该模板的任何其他内容。

于 2014-06-03T19:00:58.480 回答