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 ビューのテンプレート プロパティを文字列ではなく関数として定義することで、DOM 識別子を提供する代わりに、HTML としてテンプレートを読み込むことができます。

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

1 つのオプションを次に示します。

// 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 に答える