1

バックボーンに一貫性がないという問題があります。コレクションのfetchメソッドにconsole.logを追加したので、サーバーから提供されるデータが常に存在することはわかっていますが、ビューでその情報が表示されない場合や、this.model.models.lengthがフェッチがオブジェクトを返したことがわかっている場合は、ゼロにします。

フェッチと表示の間にオブジェクトをドロップする理由がわからないので、誰かが助けてくれることを願っています。

私のルーターは次のようになります。

Router = Backbone.Router.extend({
    routes: {
       ""              : "index",
       "/"             : "index",
       "testing"       : "index",
       "follow/:type/" : "follow"
    },

    follow: function(type) {
        switch(type) {
            case "companies":
               this.followedItems = new FollowedCompanies();
               break;
            case "software":
               this.followedItems = new FollowedSoftware();
               break;
            case "hardware":
               this.followedItems = new FollowedHardware();
               break;
            case "tags":
               this.followedItems = new FollowedTags();
               break;
            case "people":
               this.followedItems = new FollowedPeople();
               break;
            default:
        }
        title = type.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
        this.followedItems.fetch({
            success: function(data) {
            },
            error: function(data) {
                console.log("Error: " + data);
            }
        });
        this.followView = new FollowView({
            model: this.followedItems,
            el: $("#activityFeed"),
            title: title
        });
    }
});

    var router = new Router();
    Backbone.history.start();

モデル/コントローラー、簡潔にするために1つに切り詰めましたが、すべて同じであり、1つでも一貫性がありません。

var FollowedSoftware = Backbone.Collection.extend({
    url: '/api/v1/follow_software/?format=json',
    model: TestFollowing,
    parse: function(resp) { 
          console.log(resp.objects); 
          return resp.objects; 
    }
});

私の見解は次のようになります。

var FollowView = Backbone.View.extend({
    template: _.template($("#FollowHeaderTemplate").html()),
    initialize: function() {
        var self = this;
        $(self.el).slideUp('fast', function() {
            self.model.fetch(); // Put here for to help?  Doesn't matter if it's here or not really. 
            $(self.el).html(self.render());
        });
        $(self.el).slideDown('slow');
        // this.model.reset();
    },
    render: function() {
        var self = this;
        $(this.el).html(new FollowHeaderView().render({title: this.options.title}).el);
        console.log(this.model.models);
        $(self.el).append(new FollowHeaderView({title: this.options.title}).render());
        _.forEach(this.model.models, function(item) {
             $(self.el).append(new FollowedItemView({model: item}).render().el);
        });
    }
})

var FollowHeaderView = Backbone.View.extend({
    template: _.template($("#FollowHeaderTemplate").html()),
    render: function() {
        $(this.el).html(this.template({"title": title}));
        return this;
    }
})

var FollowedItemView = Backbone.View.extend({
    template : _.template( $("#FollowedTemplate").html()),
    render: function() {
        $(this.el).html(this.template({"item" : this.model.toJSON()}))
        return this;
    }
});

「ソフトウェア」ルートを実行するだけでも、機能する場合と機能しない場合があります。fetchのconsole.logメソッドは常に作業データを返しますが、ビューのconsole.logは時々しか返しません。

クライアントとサーバーのどちらにもキャッシュしていませんが、これを一貫して機能させることはできません。.fetch呼び出しで、成功とエラーのコールバックを追加しましたが、エラーのコールバックがトリガーされることはありません。同期をどこでもオーバーライドしていません。私は0.9.2のBackboneを使用しており、提供サーバーはDjango-Tastypieを搭載しています。これは問題なく動作します（同じコードを持つ他のモデルでも問題なく動作します）。

switchステートメントと関係があるかもしれませんが、それがどのようになるかはわかりません。また、各「タイプ」のルートを定義するのはばかげているようです（必要に応じて行います）。

私は何かが足りないのですか？

4

2 に答える 2

4

ルーターのfollowメソッドの最後で、fetchを呼び出し、すぐにビューを初期化します。ビューを初期化し、コレクションでfetchを呼び出してから、ビューのrenderメソッドをコレクションの"reset"イベントにバインドする必要があります。フローは非同期であり、それに応じて処理する必要があります。

これは、フェッチ時に成功/エラーメソッドを実装するのではなく、イベントにバインドする例ですreset（通常はこれを行う必要はありません）。

var FollowView = Backbone.View.extend({
    template: _.template($("#FollowHeaderTemplate").html()),
    initialize: function() {
        var self = this;
        $(self.el).slideUp('fast', function() {
            self.model.fetch(); // Put here for to help?  Doesn't matter if it's here or not really. 
            $(self.el).html(self.render());
        });
        $(self.el).slideDown('slow');

        // **ADDED BY lupefiasco**
        self.model.on('reset', function() {
            self.render();
        }, this);
    },
    render: function() {
        var self = this;
        $(this.el).html(new FollowHeaderView().render({title: this.options.title}).el);
        console.log(this.model.models);
        $(self.el).append(new FollowHeaderView({title: this.options.title}).render());
        _.forEach(this.model.models, function(item) {
             $(self.el).append(new FollowedItemView({model: item}).render().el);
        });
    }
})

サイドノート

ルートを呼び出すたびにビューを再初期化していますが/follow/:type、これはまったく問題ありませんが、新しいビューを初期化する前に、古いビューのバインドを解除する必要があります。だから、このようなことをしてください。

if (this.followView != null) {
     this.followView.off(); // old view is now unbound
}
this.followView = new FollowView();

コンストラクターでビューのルート要素を渡す必要はありません。プロパティを介してビューで定義するだけでel、Backboneが自動的にセットアップします$el（「jQuerified」バージョン）。

var FollowedItemView = Backbone.View.extend({
    template : _.template( $("#FollowedTemplate").html()),
    el: '#activityFeed',
    render: function() {
            this.$el.html(this.template({"item" : this.model.toJSON()}))
            return this;
    }
});

modelプロパティを介してコレクションをビューに渡す必要があるときに、プロパティを介してコレクションをビューに渡しcollectionます。これによって機能的に大きな違いが生じるとは思いませんが、ベストプラクティスです。

于 2012-05-05T15:55:10.800 に答える
0

サーバーからのフェッチが完了する前に、ビュー内のモデルにアクセスしています。success呼び出しのコールバック内でビューを初期化してみてくださいfetch。

例えば

var my = this;
this.followedItems.fetch({
  success: function(model) {
    my.followView = new FollowView({
      model: model,
      el: $("#activityFeed"),
      title: title
    });
  }
});
于 2012-05-05T15:45:41.593 に答える