2

アップデート

プロジェクトの回避策を作成しました。空のテンプレートをこのビューの既定のテンプレートに設定し (さらに遅延が発生した場合に備えて、実際には読み込みメッセージとスロバーが含まれています)、モデル変更イベントを設定して、準備ができたらビューの $el html を groupTemplate に置き換えます。これにより、開発、テスト、および実稼働ボックスでシームレスな移行が行われますが、モデルのデータの取得中に実稼働が遅くなると、実際には読み込みメッセージが表示されます。

define([
  'underscore',
  'backbone',
  'marionette',
  'models/group',
  'text!templates/shared/empty.html', // include empty template
  'text!templates/groups/group.html'
], function(_, Backbone, Marionette, groupModel, emptyTemplate, groupTemplate){
  var GroupView = Backbone.Marionette.ItemView.extend({
    initialize: function() {
      var view = this;

      this.model = new groupModel({id:this.options.groupid});

      // listen to the model change and display the real template when fired.
      this.model.on('change', function(){
        view.$el.html(_.template(groupTemplate, view.model.attributes));
      });

      this.model.fetch();
    },
    template: emptyTemplate // display empty template be default
  });
  return GroupView;
});

ネストされた列レイアウト (この場合は 3 列) を使用した単一のレイアウトがあります。ネストされたレイアウトは、対応するビューで呼び出され、それらのビューを必要とし、独自の領域に表示します。（これを行うより良い方法があれば、私に知らせてください）。

私の問題は、col2 (ネストされた 3 列のレイアウト) の GroupView が ItemView を使用しており、開始するデータがないモデルを使用していることです。モデルは、コレクションからではなく、URL を使用してデータを取得するため、フェッチを使用してデータを取得する必要があります。ItemView は、データのないモデルを使用してそのテンプレートをレンダリングしようとしており、モデル フィールドを見つけることができません。次のエラーが表示されます。

Uncaught ReferenceError: グループ名が定義されていません

レンダリングを遅らせる方法はありますか、または ItemView には、colletionsView のような文書化されていない emptyView がありますか? これを処理するためのより良い方法があれば、私に知らせてください。

ルーターコントローラー

group: function(groupid) {
  // require and setup our three column layout
  require([
    'views/layouts/three-column', 'views/shared/left-user-menu',
    'views/groups/group', 'views/shared/location'
  ], function(threeColumnLayout, leftView, groupView, locationView) {
  App.wrapper.currentView.main.show(new threeColumnLayout({
    views: {
      col1: new leftView(),
      col2: new groupView({groupid: groupid}),
      col3: new locationView()}
  }));
}

ネストされたレイアウト (3 列)

define([
  'underscore',
  'backbone',
  'marionette',
  'text!templates/layouts/three-column.html'
], function(_, Backbone, Marionette, threeColumnTemplate) {
  var Layout = Backbone.Marionette.Layout.extend({
    initialize: function(options) {
      var layout = this;

      this.on('render', function(options){
        layout.col1.show(options.options.views.col1);
        layout.col2.show(options.options.views.col2);
        layout.col3.show(options.options.views.col3);
      });
    },
    tagName: 'div',
    template: threeColumnTemplate,
    regions: {
      col1: '#col1',
      col2: '#col2',
      col3: '#col3'
    }
  });

  return Layout;
});

グループアイテムビュー

define([
  'underscore',
  'backbone',
  'marionette',
  'models/group',
  'text!templates/groups/group.html'
], function(_, Backbone, Marionette, groupModel, groupTemplate){
  var GroupView = Backbone.Marionette.ItemView.extend({
    initialize: function() {
      this.model = new groupModel({id:this.options.groupid});
      this.model.fetch();
    },
    template: groupTemplate
  });
  return GroupView;
});
4

2 に答える 2

3

データの準備ができていることがわかったら、フェッチしてからレンダリングします。バックボーンフェッチが既に promise を返すので、promise を使用して簡単にします。

initialize: function () {
  var that = this;
  var fetching = this.model.fetch();

  fetching.done(function() { that.render(); });
}
于 2012-12-12T16:58:40.823 に答える
1

同様の問題がありました

Backbone Marionette 取得完了前に表示中

this.model = new groupModel({id:this.options.groupid});

渡されるオブジェクトがあるため、render が起動します。フェッチを取得する前に..

私の通常の回避策は、フェッチがオブジェクトをハイドレートする前に、テンプレートが必要とするすべてのものに対して空白のデフォルトを設定することでした。

于 2012-09-12T20:48:44.390 に答える