1

私はバックボーンアプリを作成しています。すべてが機能しているように見えますが、このアプローチで機能とビューを追加し続けると、すぐにリファクタリングする必要があるかもしれません。バックエンドでParseを使用しています。つまり、オブジェクトParseは。と同等Backbone.Modelです。モデルはモバイル向けに最適化されているため、モデルを制御できません。ここでは、3つの異なるモデルの特定のキー値のみを表示する必要があります。

「間違った」ものは何もありませんが（それは機能します）、私が「より大きな」間違いをし始めるまでは時間の問題です。

これが私のRouter：

App.Controllers.Documents = Backbone.Router.extend({
    routes:{
        "story/:id" : "fullStory",
        "" : "index"
    },
// ...
   fullStory: function(id){
     var self = this;
     var query = new Parse.Query(Steps);
     query.equalTo("story", id)
     var steps = query.collection();

     steps.fetch({
       success: function() {

         new App.Views.Steps({ collection: steps });

         var title = new Story({ objectId: id });
         title.fetch({
              success: function(model, resp) {
              new App.Views.Title({ model: title});
              var idUser = title.toJSON().idUser;
              var user = new Parse.User({ objectId: idUser });
              user.fetch({
                  success: function(){
                         // I just need the username key here...
                     new App.Views.Username({model:user,el:$("#user")});
                  },
                  error: function(){
                     new Error({ message: 'Could not find the user you requested.' });
                  }
               })
             },
              error: function() {
                new Error({ message: 'Could not find that story.' });

               }
          })
        },
        error: function() {
          new Error({ message: "Error loading story." });
        }
      });
}

Parseでオブジェクトが作成された方法を考えると、 3つの異なるオブジェクトにアクセスする必要があるためView、「パーツ」でレンダリングしています。FullStory Viewこの関数にこれらの「サブビュー」を内部に含めてレンダリングしたいのですParse.Objectが、他のオブジェクトへの参照が必要なため、どのように実行するのかわかりません->var user = new Parse.User({ objectId: idUser });ここidUserで、は別のオブジェクトからのキーです。

最後に私のViews：

App.Views.Steps = Backbone.View.extend({
  tagName : "ul",
  className: "steps",
  initialize: function() {
    this.render();
  },
  render: function() {
    this.$el.html(_.template($("#story_steps").html())({ collection: this.collection }));
    $('#steps_wrapper').html(this.el);
  },
});

App.Views.Title = Backbone.View.extend({
  initialize: function() {
    this.render();
  },
  render: function() {
    this.$el.html(_.template($("#story_title").html())({ model: this.model }));
    $('#title').html(this.el);
  }
});
App.Views.Username = Backbone.View.extend({
  initialize: function() {
   this.render();
  },
  template: _.template('<%= name %>'),

  render: function() {
  this.$el.html(this.template(this.model.toJSON()));
  }
});
4

1 に答える 1

6

あなたはこれについて間違った方法で進んでいます。ルーターは、最初のビュー/コレクションを作成し、おそらくフェッチ呼び出しを行うための数行のコードである必要があります。ほとんどの機能はビューにあるはずです。

ルーターはこれを行う必要があります 

fullStory: function(id){
     var self = this;
     var query = new Parse.Query(Steps);// not sure what this does
     query.equalTo("story", id) // This does nothing!
     var stepsCollection = query.collection();
     var stepsView = new App.View.Steps({collection: stepsCollection});
     stepsCollection.fetch() // you could also do this in initialize()
}

ここで知っておく必要があるのは、collection.fetch() がコレクションで「リセット」イベントをトリガーし、それがビューにバブルアップして処理できることです。したがって、ビューで「リセット」イベントをリッスンして処理し、再レンダリングします。

App.Views.Steps = Backbone.View.extend({
  tagName : "ul",
  className: "steps",
  initialize: function() {
      this.bindAll(this, 'render');
    this.collection.bind('reset', this.render);
  },
  render: function() {
    this.$el.html(_.template($("#story_steps").html())({ collection: this.collection }));
    $('#steps_wrapper').html(this.el);
  },
});

StepsView は、ステップ (それが何であれ) とそれぞれのモデル/コレクションのイベントのレンダリングと処理を担当する単一責任の原則を思い出してください。ユーザー名ビューは、ユーザー名に関するすべてのレンダリングと処理を担当します。現時点では、すべての責任がルーターに実装されており、このアプローチは完全に間違っています。

USername と Title に個別のビューが必要かどうかを質問します。これらは、独自のビューではなく、より広いビューのテンプレートの一部としてレンダリングする必要があります。何もしません。

あなたが質問を投稿した理由は、何か変なにおいがしたことを感じています。大幅なリファクタリングを行います - ルーターを数行に減らします... ビューは常にバックボーンで最大のクラスになります。

バックボーンをすばやく把握したい場合は、優れた peepcode スクリーンキャストを強くお勧めします。

https://peepcode.com/products/backbone-js https://peepcode.com/products/backbone-ii https://peepcode.com/products/backbone-iii

約 3 時間と 30 ドルですべてを理解できます

于 2012-07-05T10:40:21.280 に答える