处理带骨干的路由

Question

我目前正在与骨干一起工作，但我有一个疑问，或者可能是一个毫无意义的问题。

基本上，我想做一个基于类别的文章列表。

所以，我开始定义我的路线，没问题。

所以，我有这样的事情：

var appRouter = Backbone.Router.extend({
            routes: {
                '': 'home',
                'products': 'showProducts',
            }

}); 

我想要的基本上是，当用户点击某个类别时，我只想更新下面的产品列表，而不是我的全部视图。当然，我可以在视图内部做一些事情，检测选择了什么类别，然后只用这些产品更新我的内容。

但我认为，我更喜欢我的应用根据我当前的路线做出反应。

所以，我想要的是这样的：

var appRouter = Backbone.Router.extend({
        routes: {
            ': 'home',
                    'foo:bar',
            'products/:category': 'showProducts',
                 },
                 home:function(){
                     this.close();
                     //render my home view
                 },
                 bar:function(){
                     this.close();
                     //render my bar view
                 },
                 showProducts:function(id){
                     this.close();
                     //render my products view
                 },
}); 

这很好用，但我想避免，我的 productsWrapperView 中带有类别列表的标题再次重新渲染...

所以，如果我当前的页面已经是产品视图，如果我选择了一个类别，

 "<a href='/products/2'>, 

我只想更新我的产品列表，而不是整个视图.. 有人知道一个好方法吗？

我的问题有意义吗？

Answer 1

您应该采用子视图。 cmets说得对，木偶擅长这个，但不是必须的。

Backbone 要记住的一点是，它不会为你做很多事情，但它也不是很固执。这为我们在 Backbone 中提供了很大的空间。

对于子视图，我使用以下函数将子视图分配给视图中的 DOM 元素：

Gist

Backbone.View.prototype.assign = function(set, preventEmpty) {
        /*
        accepts an object of selectors:arrays of views

        maps each of the views to the selector
        */
        var self = this;
        //store all subviews
        self.assignments = _.extend(self.assignments||{},set);

        //
        _.each(set, function(views, selector) {
                if(!views) return;
                if(!preventEmpty) {
                    var el = self.$(selector).empty();
                } else {
                    var el = self.$(selector);
                }

                if(views instanceof Array != true) {
                    views = [views];
                }
                _.each(views, function(view) {
                    view.setElement(el).render();  
                });
            }, this);

    };

我可以用来在视图中应用子视图：

init: function(){
    var SubView = new SubView({model: this.model});
    this.assign({
          '.sub-view':SubView
     });
}

将 SubView.el 分配给.sub-view。

然后，您可以设置子视图来观察模型的变化，并自行更新：

var SubView = Backbone.View.extend({
  init: function(){
    var render = this.render.bind(this);
    this.listenTo(this.model, 'change', render);
  }
}

这只会重新渲染子视图，而不是父视图或任何其他视图。

值得注意的是，这可能不会阻止浏览器重新绘制，但这对您的应用程序来说可能不是问题。