0

Webpack でアプリケーションをセットアップし、Backbone Marionette でフロントエンドを実行しています。[AMD/Require と同様に、App Module 内の Controller 内で LayoutView を生成する] アプリケーション スクリプトを実行することはできましたが、わかりません。

以前は Underscore テンプレートを使用していましたが、webpack は Jade と Handlebars を好みます。Jade に切り替えても、LayoutView はエラーを返します。

Uncaught UndefinedTemplateError: null または未定義であるため、テンプレートをレンダリングできません。

レンダリングされた Jade テンプレートをコンソールからログアウトすると、次のようになります。<div class="glossary-container"></div>

レビュー用の私のLayoutViewコードは次のとおりです。

Marionette = require 'marionette'
AppLayoutTemplate = (require 'templates/appLayoutTemplate.jade')()
console.log AppLayoutTemplate

class AppLayoutView extends Marionette.LayoutView
  initialize: ->
    template: AppLayoutTemplate
    regions:
      glossaryContainer: '.glossary-container'
4

2 に答える 2

0

Handlebarsでテンプレート エンジンとして使用するにはMarionette、 のいくつかのメソッドを書き直す必要がありますMarionette。

また、テンプレートをマリオネット内にロードし、何らかのキャッシングを使用することをお勧めします。

最初の書き換えMarionette.TemplateCache.prototype.loadTemplate：

Marionette.TemplateCache.prototype.loadTemplate = function (yourTemplateId) {

    var yourTemplate, 
        url = 'your/path/to/templates' + yourTemplateId + '.html';

    if (Handlebars.templates && Handlebars.templates[yourTemplateId]) {
        // from cache
        yourTemplate = Handlebars.templates[yourTemplateId];
    } else {
        // from remote resource
      Backbone.$.ajax( {
        async   : false,
        url     : url,
        success : function ( templateHtml ) {
            yourTemplate = templateHtml;
        }
    } );
    }
    return yourTemplate;
};

そして書き直しますMarionette.TemplateCache.prototype.compileTemplate

Marionette.TemplateCache.prototype.compileTemplate = function (yourTemplate) {
    if ($.isFunction(yourTemplate)) {
        return yourTemplate;
    } else {
        return Handlebars.compile(yourTemplate);
    }
};

この後、次のようにビューをロードします。

Marionette = require 'marionette'
    class AppLayoutView extends Marionette.LayoutView
      initialize: ->
        template: 'path_to_your_template/without_extension'
        regions:
          glossaryContainer: '.glossary-container'

これは、ハンドルバーで機能します。私はジェイドに詳しくありませんが、きっと同じはずです。

于 2014-10-06T07:42:01.637 に答える
0

これは、構文エラーが原因でした。メソッド内に誤ってtemplateハッシュをネストしました。initialize ->将来誰かに役立つことを期待して、自分の質問に答えます。

于 2014-10-06T08:03:33.600 に答える