Question

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

Collection - > Models -> Views

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

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

虽然调试了这个但我注意到了一些奇怪的事情

正在调用父视图（保存搜索结果的页面）渲染函数，后者又调用每个行的渲染函数。我认为这是导致每个子视图重新渲染的原因。

以下是一些演示此问题的代码示例：

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

    }
});

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

   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

有两种方法可以实现，一种是如果你正在收集你的收藏中的骨干事件，第二种方式是如果它是一个被触发的DOM事件。

对于骨干事件，如果查看documentation，您将看到在集合中的模型上触发的事件也将在集合本身上触发

在集合中的模型上触发的任何事件也将是为方便起见，直接在集合上触发。这可以让你监听对任何模型中特定属性的更改集合，例如：documents.on（＆＃34;更改：选择＆＃34;，...）

在这种情况下，您应该检查事件回调是否要对其进行操作（查看触发它的内容，可能在触发事件时传入extra flag），或确保您只是倾听您有兴趣采取行动的具体事件。例如，您可能希望收听其更具体的版本（change）而不是收听集合通用change:someProperty事件。

对于DOM个事件，如果您在父母视图中收听同一个选择器，就像在您孩子的视图中一样，这很容易发生，因为父母＆＃39; s root el也是孩子el的父母。

骨干子视图调用为父进行渲染

1 个答案: