1

Backbone 存在不一致的问题。我在我的集​​合的 fetch 方法中添加了一个 console.log，所以我知道服务器总是提供数据，但有时我的视图无法看到该信息，或者显示 this.model.models.length 到为零，当我知道 fetch 返回了对象时。

我不知道为什么我会在 fetch 和尝试查看它们之间删除对象，所以希望有人能提供帮助。

我的路由器是这样的：

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

Model / Controller，为了简洁，只剪了一个，但都是一样的，甚至有一个不一致：

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而不必在 fetch 上实现成功/错误方法（您通常不必这样做）。

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

旁注

您在每次调用 route 时重新初始化视图/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 回答