Question

我希望在集合提取模型之后但在模型渲染之前执行操作，清除父元素。

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

我当然可以执行预取动作，但我希望在完成提取时以及渲染模型之前进行操作。

我尝试使用重置和更改事件来侦听集合，但两者都导致了不必要的最终结果。重新绑定的事件朝向那个方向但传递的参数是整个集合而不是集合中的单个模型，因此由于参数类型（集合而不是模型）的不同，使用add事件回调是不可能的需要）

在获取集合提取时如何调用回调的任何想法是否成功但是还没有呈现模型？

模型包含返回的属性，而collection包含用于获取的url和用于返回参数包装对象的parse方法。

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

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

我不确定你在问什么，但你试过了吗？

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

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

希望它有所帮助！

编辑：获取和渲染之间没有直接的联系我的赌注是你将渲染绑定到模型更改。

使用 ===============＆GT;＆GT;＆GT;＆GT; http://backbonejs.org/#Model-parse

Answer 2

好的，我想我理解你的问题，这是一个建议的解决方案。您现在正在收听集合中的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的事情，但我认为上面的代码应该足以让你开始运行。如果有效，请告诉我。

Backbone预渲染的集合模型

2 个答案: