jquery - Backbone 响应有时返回空

骨干网不一致的问题。我在集合的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();

模型/控制器，为简洁起见，仅剪裁为一个，但全部相同，甚至其中一个不一致：

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;
    }
});

即使只是执行“软件”路线，有时也行得通，有时却行不通。提取中的console.log方法始终返回工作数据，但视图中的console.log有时仅返回。

我没有在客户端或服务器上的任何地方缓存任何东西，但是我无法始终如一地工作。在我的.fetch调用中，我添加了成功和错误回调，但是错误回调从未触发。我没有在任何地方覆盖同步。我正在使用0.9.2的Backbone，提供的服务器由Django-Tastypie提供支持，该服务器工作正常（并且在具有相同代码的其他某些型号上也可以正常工作）。

可能与switch语句有关，但是我不知道如何，为每个“类型”定义路由似乎很愚蠢（尽管我必须这样做）。

我想念什么吗？

最佳答案

在路由器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属性将其传递给视图。我认为这在功能方面并没有多大区别，但这是best practice。

关于jquery - Backbone 响应有时返回空，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10463019/