Марионетка - Как установить шаблон для Layout из загрузки html через requirejs?

Question

Я использую 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;

    }
);

почему я не могу получить свой шаблон? и как правильно его получить? кто-нибудь, помогите мне, пожалуйста?

Заранее спасибо.

Answer 1

Вы можете загрузить шаблон в виде HTML вместо предоставления идентификатора DOM, определив свойство шаблона представления Marionette как функцию вместо строки.

define([
    'text!templates/my_template.html'
], function(
    Templates
) {

    return Marionette.View.extend({

        template: function(data) {
            return _.template($(Templates).filter("#template_id").html())(data);
        }

    });

});

Он ищет элемент с идентификатором "template_id" в файле my_template.html, получает внутренний 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'

Преимущество этого состоит в том, что вы также можете добавить другую проверку для проверки документа или чего-либо еще, что вы хотите найти в этом шаблоне.