4

プロジェクトには Backbone と Backbone.Marionette を使用しています。現在、ビューのすべてのテンプレートをサーバーに保存しており、loadTemplate 呼び出しを上書きしてそれらを非同期にロードしました。

しかし、レイアウト ビューを使用すると、ビューのテンプレートが非同期で読み込まれるため、レイアウトの領域にすぐにアクセスできないようです。次に例を示します。

var layoutView = new Layout();
var itemView = new ItemView();

App.containerRegion.show(layoutView);
layoutView.mainRegion.show(itemView); <---- This is where the issue would occur.

テンプレートをサーバーから非同期的にロードしない場合は、問題なく動作します。これを実装する良い方法は何でしょうか? すべてを一度にロードするのではなく、テンプレートをサーバーに保持したいと考えています。また、コード全体でレイアウト ビューの render イベントにバインドすることも避けたいと考えています。

ありがとう

4

2 に答える 2

2

Marionette.ItemView の render 関数をオーバーライドする必要があると思います。最初にテンプレート データをロードし、テンプレートを正常にロードしたときにビューをレンダリングします。

  render: function(){          
    if (this.beforeRender){ this.beforeRender(); }

    this.trigger("before:render", this);
    this.trigger("item:before:render", this);

    var data = this.serializeData();
    var templateSrc = this.getTemplate();

    $.ajax({
      url: 'templatesFolder/' + templateSrc,
      success: _bind(function(template){
         var html = Marionette.Renderer.render(template, data);
         this.$el.html(html);

         if (this.onRender){ this.onRender(); }
         this.trigger("render", this);
         this.trigger("item:rendered", this);
      }, this)
    })

    return this;
  },
于 2012-09-23T11:51:54.933 に答える
2

Marionette.Asyncプラグインを取得する必要があります。あなたが望むことを正確に行うために構築されました。

ただし、サーバーからテンプレートを取得する場合、非同期でパフォーマンスに影響があることを知っておく必要があります。これを行うためのネットワーク遅延により、アプリがバックグラウンドで動作していることを画面に示すもの (スピナー グラフィックなど) がない場合、ユーザーはアプリケーションが応答していないと考える可能性があります。

ネットワークの遅延と転送を削減するために、できるだけ多くのテンプレートを一度に取得することをお勧めします。私の友人がまさにこれを行うことについて書いたブログ投稿があります。

于 2012-09-26T02:46:53.677 に答える