5

そのため、私はバックボーンアプリに取り組んでおり、require.jsを使用してできる限りモジュール化しようとしています。 これが私のガイドです。

常にコレクションを取得するためのビューを取得するのに問題があります。ベースURL（myapp.com/）からアプリにアクセスし、ビューのルートに移動すると、コレクションがフェッチされます。ビューに移動せず、代わりにからアクセスするとmyapp.com/#/campaigns、コレクションはフェッチされません。

ここにいくつかの関連するコードがあります。

router.js

    define([
  'jQuery',
  'Underscore',
  'Backbone',
  'views/home/main',
  'views/campaigns/list'
], function($, _, Backbone, mainHomeView, campaignListView ){
  var AppRouter = Backbone.Router.extend({
    routes: {
      // Define some URL routes
      'campaigns': 'showCampaigns',

      // Default
      '*actions': 'defaultAction'
    },
    showCampaigns: function(){
      campaignListView.render();
    },
    defaultAction: function(actions){
      // We have no matching route, lets display the home page 
      //mainHomeView.render(); 
    }
  });

  var initialize = function(){
    var app_router = new AppRouter;
    Backbone.history.start();
  };
  return { 
    initialize: initialize
  };
});

collections / campaigns.js

    define([
  'jQuery',
  'Underscore',
  'Backbone',
  'models/campaigns'
], function($, _, Backbone, campaignsModel){
  var campaignsCollection = Backbone.Collection.extend({
    model: campaignsModel,
    url: '/campaigns',
    initialize: function(){
    }

  });
  return new campaignsCollection;
});

ビュー/キャンペーン/list.js

define([
  'jQuery',
  'Underscore',
  'Backbone',
  'collections/campaigns'
  ], function($, _, Backbone, campaignsCollection){
      var campaignListView = Backbone.View.extend({
        el:$('#container'),
        initialize:function(){
          this.collection = campaignsCollection;
          this.collection.fetch();
        },
        render: function(){
          var data = {
            campaigns: this.collection,
            _: _
          };
          $('#container').html('Campaigns length: '+data.campaigns.models.length);
        }
      });
      return new campaignListView;
  });

私が間違っていることについて何か考えはありますか？this.collection.fetch()ビューのinitalize機能を呼び出すことと関係があると思います。それが問題である場合、どこに置くべきfetch()ですか？

4

2 に答える 2

3

コードの問題はcampaignListView、コレクションが初期化されたときにコレクションをフェッチし、一度だけ初期化されることです。render2回目に変更したときに、ルーターから実際に呼び出されるinitializeメソッドは、campaignListViewのメソッドを呼び出しませんurl。

ここには2つのオプションがあります：

1.キャンペーンリストビューのインスタンスではなくクラスを返し、ルーターで初期化します。

// in your router code
showCampaigns: function(){
    var campaignListViewInstance = new campaignListView(); // don't forget the brackets after your initialize function
    campaignListViewInstance.render();
},

// in your campaignListView code :
return campaignListView; // without "new"

これにより、ルーターがヒットするたびにコードが初期化されます。

2.フェッチをrenderメソッドに配置します

// in your campaignListView code :
initialize:function(){
    this.collection = campaignsCollection;
},
render: function(){
    this.collection.fetch({success: function(collection) {
        var data = {
            campaigns: collection,
            _: _
        };
        $('#container').html('Campaigns length: '+data.campaigns.models.length);
    }); // this will be fetched everytime you render and also it has success callback
}

また、すべてのインスタンス作成関数を最後に角かっこで置き換える必要があることにも注意してください

return new campaignListView; --> return new campaignListView();
return new campaignsCollection; --> return new campaignsCollection();

直面するもう1つの問題は、の非同期作業ですfetch。コレクションの成功またはイベント駆動型レンダリングを使用する必要があります。これfetchは、バックグラウンドで機能し、を呼び出した直後にrenderを呼び出すとデータがなくなるためですfetch。

AMDアプローチの場合は+1。

于 2012-05-12T07:40:15.327 に答える
0

チュートリアルを実際に更新する必要がありますが、インスタンス化されたモジュールを返さない方がよいでしょう。たぶんhttp://backboneboilerplate.comをチェックしてみてください

于 2012-05-14T00:08:15.163 に答える