0

適切に動作しているバックボーン アプリがありますが、名前空間でコードを再編成しようとすると、何も実行できません。(コンソール ログ メッセージを介して) 初期化されていることがわかっているビューのイベントを (ID をクリックして) トリガーすることさえできないので、何らかの根本的な欠陥を導入したのではないかと考えています。私はこのブログ (フランス語) http://www.atinux.fr/2011/12/10/organiser-son-code-backbone-js-en-modules/で設定されたパターンに従っています。

メインの application.js (以下を参照) では、ドキュメントの準備が整った状態でアプリを起動した後、すべてのビューとモデルをインスタンス化します。この名前空間を作成した結果として導入された 1 つの変更は、ビューのモデルを次のように設定することでした。this.models.game

this.views.clock_view      = new this.Views.clockView({ model: this.models.game});

modules フォルダー内には、views.js と models.js がありました。このように各ビューとオブジェクトを作成し、app.Views or app.Modelsそれに応じて

app.Views.announceView = Backbone.View.extend({
 ....
app.Views.optionsView = Backbone.View.extend({
 ...

この app.Views.optionsView は (初期化子の console.log ステートメントに従って) 初期化されていますが、#new_game をクリックすると、startNewGame の console.log がトリガーされません。

 'click #new_game': 'startNewGame'
      // 'click .action_button': 'startNewGame'

    },

    startNewGame: function() {
      console.log("startNewGame");
      this.model.new();
    },

名前空間の結果として、私が行ったもう 1 つの重要な変更は、他のビューの 1 つ内に新しいビューを作成したときでした。以前の (名前空間のないアプリ) では、QuestionListView から個々の質問項目を作成しました

    var view = new QuestionListItemView({ model: game });

しかし、今私はやっています

 var view = new app.Views.questionListItemView({ model: app.models.game })

モデルのインスタンスはapplication.jsに保存されていたので、this.models.game「this.models.game」も使ってみました

   var view = new app.Views.questionListItemView({ model: this.models.game })

いずれにせよ、ゲーム モデルが関与する前に、上で概説した startNewGame 関数をトリガーすることはできないため、モデルを特定する方法だけの問題ではありません。

内部から新しいビューを作成するときに、「new」の後に this.Views または app.Views を使用する必要があるかどうかも疑問に思いました

  var view = new app.Views.questionListItemView({ model: this.models.game })

私が導入した欠陥を特定するのを手伝っていただければ幸いです。

アプリケーション.js

var app = {
  // Classes
  Collections: {},
  Models: {},
  Views: {},
  // Instances
  collections: {},
  models: {},
  views: {},
  init: function () {
    this.models.game          = new this.Models.game();
    this.views.story_view     = new this.Views.storyView();  #doesn't have a model
    this.views.clock_view      = new this.Views.clockView({ model: this.models.game}); 
    this.views.field_view      = new this.Views.fieldView({ model: this.models.game});
    this.views.options_view    = new this.Views.optionsView({ model : this.models.game});
    this.views.announcement_view = new this.Views.announceView({ model: this.models.game});
    this.views.question_list_view      = new this.Views.questionListView({ model : this.models.game});
    this.views.question_list_item_view = new this.Views.questionListItemView({ model : this.models.game});
  }
};

$(document).ready(function () {

  app.init();
}) ;

オプション ビューは初期化されていますが、その #id をクリックしても startNewGame 関数をトリガーできません

app.Views.optionsView = Backbone.View.extend({
    // el: $("#options"),
    el: $("#options"),
    initialize: function() {
        console.log("app views OptionsView initialized");
      // this.model.bind("gameStartedEvent", this.removeGetAnswerButton, this);
      this.model.bind("gameStartedEvent", this.disableNewGame, this);

    },
    events: {
      'click #demo': 'startDemo',
      'click #new_game': 'startNewGame'
      // 'click .action_button': 'startNewGame'

    },
    startDemo: function(){
      console.log("start demo");
     this.model.demo();
    }, 
    startNewGame: function() {
      console.log("startNewGame");
      this.model.new();
    },
    disableNewGame: function(){
        $('#new_game').attr("disabled", true);
    }


  });

更新私のファイル構造は次のようになります

<%= javascript_include_tag 'application.js'%>
<%= javascript_include_tag 'modules/models'%>
<%= javascript_include_tag 'modules/views'%>

ビューとモデル ファイルの先頭で、次のようなことを行います。

app.Views.optionsView = Backbone.View.extend({

つまり、これ以上ドキュメントの準備ができていません。実際、これらのファイルに準備ができている別のドキュメントを含めると、application.js の初期化が中断されます。

4

1 に答える 1