正确添加骨干中的视图列表

Question

目前,当我在骨干中插入视图列表时,我会:

    var jqGuestList = $("#guestList");
    jqGuestList.empty();

    items.each(function(item){
        var view = new wedapp.view.GuestItem({
            model: item,
            collection: this.collection
        });

        jqGuestList.append(view.render().el);
    });

然而,这会给我带来很大的痛苦,手动将每一个添加到DOM都很慢,特别是在移动设备上,甚至在桌面上.

有没有办法在一个jqGuestList.html(视图)中插入所有视图？

Answer 1

您可以使用文档片段http://ejohn.org/blog/dom-documentfragments/

var jqGuestList = $("#guestList");
jqGuestList.empty();

var frag = document.createDocumentFragment();
items.each( function(item) {
    var view=new wedapp.view.GuestItem({model:item});
    frag.appendChild(view.render().el);
});

jqGuestList.append(frag);

你应该看到一些改进.