12

私の backbone.Marionette アプリケーションには、URL を構築するために Id 属性を必要とするモデルがあります。したがって、ID を渡してモデルを作成し、それをビューに追加してから、モデルをフェッチします。

   model = new Model({_id:id})               
   view = new View({model:model})                               
   app.content.show(view)                                                    
   model.fetch()

モデルがフェッチされた後にのみビューのレンダリングが開始されることを期待しますが、Marionette はすぐにモデルをレンダリングし、期待される属性が存在しないため、テンプレートのレンダリングが失敗します。回避策はありますか？

ここで受け入れられた答えに似た何かをしようとしています: Binding a Backbone Model to a Marionette ItemView - blocks .fetch()?

しかし、答えで述べたように、それはバックボーンで機能しますが、マリオネットは自動的にビューをレンダリングします。

参照: Backbone Marionette フェッチが完了する前に表示する

4

4 に答える 4

10

上記の両方の答えが機能します。
これは、私が使用することを好むさらに別の方法です（よりバックボニーを感じます）。

ビューをモデルに直接バインドする モデル
のフェッチが完了すると、指定した関数が実行されます。これは、モデルまたはコレクションで実行できます。

var Model = Backbone.Model.extend({});
var model = new Model();
model.fetch();

var View = Marionette.ItemView.extend({
    model:model,
    initialize: function(){
        this.model.bind("sync", this.render, this);// this.render can be replaced
    }                                              // with your own function
});                               

app.region.show(new View);

これにより、必要なときにいつでもフェッチすることもできます。

于 2013-02-27T09:06:21.773 に答える
7

モデルがフェッチされるまでレンダリングを本当に防止したい場合は、次のように呼び出しを並べ替える必要があります。

model = new Model({_id:id});
view = new View({model:model});
model.fetch({success: function () {
  app.content.show(view);
});

または、すぐにレンダリングして、Marionette の空白状態サポートを利用することを検討する必要があります。

于 2012-11-26T21:55:54.650 に答える
2

Derick Bailey の例の 1 つに基づいています。

 model = new Model({_id:id})               
   var fetched = model.fetch();

  // wait for the model to be fetched
  $.when(fetched).then(function(){

     view = new View({model:model})                               
     app.content.show(view)     
  });
于 2012-11-28T08:46:22.507 に答える
1

私は最近同じ問題に遭遇し、マリオネットのイベントシステムを使用して、show() を起動する前にビューがステータスを通信できるようにするパターンに落ち着きました。また、複雑さが増すrequireJSも使用していますが、このパターンが役立ちます!

クリックするとイベントを発生させて新しいビューをロードする UI 要素を持つ 1 つのビューを作成します。これはサブビューまたはナビビューである可能性があります-問題ではありません。

App.execute('loadmodule:start', { module: 'home', transition: 'left', someOption: 'foo' });

そのイベントは Wreqr の「setHandlers」によってキャッチされ、ビューの読み込みシーケンスをトリガーします (私の場合、状態遷移を処理するために一連のロジックを実行しています)。「開始」シーケンスは、新しいビューを開始し、必要なオプションを渡します。 

var self = this;
App.commands.setHandlers({'loadmodule:start': function( options ) { self.start( options );

次に、読み込み中のビューがコレクション/モデルを処理し、初期化時にフェッチします。ビューはモデル/コレクションの変更をリッスンし、wreqr の executre コマンドを使用して新しい「準備完了」イベントを発生させます。 

this.listenTo( this.model, 'change', function(){
    App.execute('loadmodule:ready', { view: this, options: this.options });
});

その準備完了イベント (およびビュー opject 参照を含むオプション) をキャッチし、show() をトリガーする別のハンドラーがあります。

ready: function( options ) {

// catch a 'loadmodule:ready' event before proceeding with the render / transition - add loader here as well

var self = this;
var module = options.options.module;
var view = options.view;
var transition = options.options.transition;
var type = options.options.type;

if (type === 'replace') {
    self.pushView(view, module, transition, true);
} else if (type === 'add') {
    self.pushView(view, module, transition);
} else if (type === 'reveal') {
    self.pushView(view, module, transition, true);
}   

},


pushView: function(view, module, transition, clearStack) {

var currentView = _.last(this.subViews);
var nextView = App.main.currentView[module];
var self = this;

var windowheight = $(window).height()+'px';
var windowwidth = $(window).width()+'px';
var speed = 400;

switch(transition) {
case 'left':

    nextView.show( view );

    nextView.$el.css({width:windowwidth,left:windowwidth});
    currentView.$el.css({position:'absolute',width:windowwidth,left:'0px'});

    nextView.$el.animate({translate: '-'+windowwidth+',0px'}, speed, RF.Easing.quickO);
    currentView.$el.animate({translate: '-'+windowwidth+',0px'}, speed, RF.Easing.quickO, function(){

        if (clearStack) {
            _.each(_.initial(self.subViews), function( view ){
                 view.close();
            });
            self.subViews.length = 0;
            self.subViews.push(nextView);
        }

    });

break;

システム全体のまともな要点を書き上げて、来週かそこらでここに投稿しようと思います。

于 2013-05-15T01:02:44.203 に答える