javascript - 主干 subview 调用父级渲染

Question

我有一个主干页面，其行为如下。

Collection - > Models -> Views

因为我有一个包含 N 长度搜索结果的集合。这些模型中的每一个都与 View 的一个实例相关联，在这种情况下， View 实例是显示的一行数据。

我希望能够将每一行从“详细信息” View 切换到包含更多信息的“高级” View 。目前，我有父 View 为每个模型呈现 N 个 View 。我可以通过更新模型和监听更改事件来切换状态更改，然后只重新渲染我单击的 View 部分。这样做时我注意到一个问题。问题是视口(viewport)跳转到页面顶部，这不是很好的用户体验。

在调试的时候我发现了一些奇怪的事情

正在调用父 View (保存搜索结果的页面)的渲染函数，而父 View 又调用每一行的渲染函数。我认为这就是导致每个 subview 重新呈现的原因。

这里有一些代码示例来演示这个问题:

// The child view's render and initialis
    var SearchInviteRow = Backbone.View.extend({

    tagName:  "invite-section-result-row",

    initialize: function(params){
        this.template = templateHTML;
        this.extendedTemplate = extendedTemplate;
        this.listenTo(this.model, 'change', this.render);
    },

    events : {
        "click .toggle-attachments" : "renderWithAttachments"
    },   

    render: function(){
        var view = this, render;
        var that = this;

        if(!this.model.get("expand")){
            var rendered = Mustache.render(view.template, that.model.toJSON());
            this.$el.html(rendered);
        } else {

            var rendered = Mustache.render(view.extendedTemplate, that.model.toJSON());
            this.$el.html(rendered);
        }

        return this;
    },  

    close: function(){
        this.remove();          
    },

    renderWithAttachments: function(){
        if( !this.model.get("expand") ) {
            this.model.set( {"expand" : true } );
            this.model.getAttachments();
        } else {
            this.model.set( {"expand" : false } );
        }

    }
});

这是父级渲染的一部分，它遍历集合，将行附加到搜索图 block 。

   for (var i = 0; i < this.collection.length; i++) {

            view.subViewArray[i] = new SearchInviteRow({
                model: this.collection.at(i)
            });

            this.$(".invite-section-inside").append(view.subViewArray[i].render().el);

        }

我无法解决的是为什么调用父级的渲染函数导致了我的其他问题。

Answer 1

发生这种情况有两种情况，一种是您正在监听集合中的 Backbone 事件，另一种是触发的 DOM 事件。

有了 Backbone 事件，如果你看一下 documentation您会看到在集合中的模型上触发的事件也会在集合本身上触发

Any event that is triggered on a model in a collection will also be triggered on the collection directly, for convenience. This allows you to listen for changes to specific attributes in any model in a collection, for example: documents.on("change:selected", ...)

在这种情况下，您应该检查事件回调是否要对它采取行动(看看是什么触发了它，也许在触发事件时传入 extra flag)，或者确保您只听您有兴趣采取行动的特定事件。例如，与其收听集合通用的 change 事件，不如收听更具体的版本 (change:someProperty)。

对于 DOM 事件，如果您在父级 View 中收听与您 child 的 View 中相同的选择器，则很容易发生这种情况，因为父级的根 el 也是 child 的 el 的父级。