0

私は div#game を持っています。ここでは、サーバーからのデータを表示したいと考えています。そのため、初期化関数を使用するときは、ゲーム モデルのサーバーから ajax 呼び出しでデータを要求します。

Game = Backbone.View.extend(
{
    id: 'game',

    initialize: function ()
    {
        this.model.on('getGame', function() {});
        this.model.getGame();
    }
}

バックボーンではコールバックが機能していないように見えるため、トリガーを作成する必要があります。したがって、アプリはgetGame、サーバーからのデータが返されてモデルの変数に保存されたときにトリガーされるトリガーをリッスンします。

これまでのところ、これはすべてうまくいきます。唯一の問題は、getGame 関数からのすべてのデータの追加が完了したときに、div#game をフェードインさせたいことです。

しかし、model.on(trigger) をオフにすると、初期化関数は getGame() 関数を実行した後に準備ができていると「考える」ため、実際にはサーバーからのデータがまだ追加されていないと思います。

したがって、親 div#all は次を実行します。

this.$el.append(new Game().el);

また、div#game の準備ができていると「考え」、div#game をそれ自体に追加し、fadeIn を与えます。

div#game にはまだサーバー データが含まれていないため、実際に戻ってくると、画像とテキストがフェードインではなく存在するようになります...

この問題を解決する方法を知っている人はいますか? 前もって感謝します！

================================================== ====

解決した

問題は、$.get および $.post 関数の非同期プロパティにありました。これが、結果がサーバーから返される前に初期化の準備が整った理由です。$.ajax に変更し、async: false にしました。これで、プログラムした/必要な順序ですべてがロードされます。

トールマリスさん、詳しく説明していただきありがとうございます。これからトリガーをたくさん使うので重宝すること間違いなしです！

4

1 に答える 1

1

div#allビューをレンダリングしてそれ自体に追加するのではなくparent、ビューに として渡すことができます。

this.gameView = new Game({parent: this});

次に、あなたのGame見解で：

initialize: function (options)
  this.parent = options.parent
  {
    this.model.on('getGame', function() { this.$el.appendTo(this.parent); });
    this.model.getGame();
  }

または、次のようにグローバル バックボーン イベント オブジェクトを使用することもできます。

window.vent = $.extend({}, Backbone.Events);

これで、次のように使用できるグローバル オブジェクトが作成されました (名前を付けて任意の名前空間に配置できます。上記のコードのように行うだけではありません)。

メインビュー:

initialize: function () {
    vent.on("GameReady", function () 
      { 
        // fade in game view
      }); 
}

ゲームビュー:

initialize: function (options)
  this.parent = options.parent
  {
      this.model.on('getGame', function() { vent.trigger("GameReady"); });
      this.model.getGame();
  }

パラメータを渡すこともできます。詳細については、こちらを参照してください。

于 2013-07-15T15:16:32.953 に答える