集合模型的主干预渲染

Question

我想在集合获取他的模型之后但在模型渲染之前执行一个操作，清除父元素。

我偶然发现了before and after render methods，但它们是特定于模型的，这将导致我的父元素在每次模型渲染之前都被清除。

我当然能够执行预取动作，但我希望它在完成提取和渲染模型之前发生。

我尝试使用监听集合的重置和更改事件，但都导致了不想要的最终结果。 重置事件接缝朝那个方向前进，但传递的参数是整个集合，而不是集合中的单个模型，因此由于参数类型的差异（集合而不是所需的模型），无法使用添加事件回调

任何想法如何在获取集合获取成功但模型尚未渲染时调用回调？

模型包含返回的属性，而集合包含用于获取和解析方法以返回参数包装对象的 url。

下面是我用来渲染集合视图的代码，它基本上是渲染集合中每个模型的视图。

Collection View
---------------
var FoosView = Backbone.View.extend({
        el: '#plans',
        events: {
            //'click tr': 'rowClick'
        },
        initialize: function() {
            this.listenTo(this.collection, 'add', this.renderNew);

            _.bindAll(this, "render");

            this.render();
        },
        renderNew: function(FooModel) {

            var item = new FooView({model: FooModel});
            this.$el.prepend(item.render().$el);
        }
        ...
    });

The model view
--------
var FooView = Backbone.View.extend({
        tagName: 'li',
        initialize: function(options) {
            this.options = options || {};
            this.tpl = _.template(fooTpl);
        },
        render: function() {
            var data = this.model.toJSON();

            this.$el.html(this.tpl(data));

            return this;
        }
    });

提前致谢。

Answer 1

好的，我想我理解您的问题，这是一个建议的解决方案。您现在正在收听您收藏中的reset 事件并致电this.renderAll。 this.renderAll 将从集合中获取模型列表并将它们呈现到页面，但仅在列表元素被清空之后。希望这会有所帮助:)。

var FoosView = Backbone.View.extend({
    el: '#plans',
    collection: yourCollection, // A reference to the collection.
    initialize: function() {
        this.listenTo(this.collection, 'add', this.renderNew);
        this.listenTo(this.collection, 'reset', this.renderAll);
    },
    renderAll: function() {
        // Empty your list.
        this.$el.empty(); 
        var _views = []; // Create a list for you subviews
        // Create your subviews with the models in this.collection.
        this.collection.each(function(model) {
            _views.push(new FooView({model: model});
        });
        // Now create a document fragment so as to not reflow the page for every subview.
        var container = document.createDocumentFragment();
        // Append your subviews to the container.
        _.each(_views, function(subview) {
            container.appendChild(subview.render().el);
        });
        // Append the container to your list.
        this.$el.append(container);
    },
    // renderNew will only run on the collections 'add' event.
    renderNew: function(FooModel) {
        var item = new FooView({model: FooModel});
        this.$el.prepend(item.render().$el);
    }
});

我不得不假设一些关于你 html 的事情，但我认为上面的代码应该足以让你启动并运行。让我知道它是否有效。

Answer 2

我不完全确定你在问什么，但你试过了吗：

MyCollection.fetch({
    success: function(models,response) {
         //do stuff here
    }
});

您也可能有兴趣查看http://backbonejs.org/#Model-parse

希望对你有帮助！

编辑：获取和渲染之间没有直接联系我敢打赌，您将渲染绑定到模型更改。

使用===============>>>> http://backbonejs.org/#Model-parse