Question

我目前正在使用骨干网，而且我怀疑或者可能是一个毫无意义的问题。

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

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

所以，我有这样的事情：

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

});

我想要的，基本上，当用户点击某个类别时，我只想更新下面的de products列表，而不是我所有的观点。当然，我可以在视图中执行某些操作，检测选择的类别，然后仅使用这些产品更新我的内容。

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

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

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

您应该采用子视图。对于牵牛花擅长这一点的评论是正确的，但这不是必需的。

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

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

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

处理具有主干的路由

1 个答案: