Вопросы Теги

Как визуализировать DOM-зависимые представления в CollectionView?

У меня есть Marionette.CollectionView, который отображает список ItemViews. Во время render()я использую модельItemView для рисования некоторого SVG, используя Raphael.

Raphael требует, чтобы я указал высоту и ширину его холста, которые я обычно беру из this.$el. Однако $el(как пустой

) не имеет размеров, пока он не будет добавлен в DOM и к нему не будут применены правила CSS, поэтому мне нужно отложить рендеринг до тех пор, пока я знать, что представление находится в DOM.

Проблема в том, что Marionette.CollectionViewне добавляет дочернее представление в DOM до тех пор, пока оно не будет отрисовано. Как я могу переопределить это поведение без повторной реализации половины CollectionView?

Пример кода

// Renders a single object.
var ItemView = Marionette.ItemView.extend({
    template: "#item-view-template",
    onRender: function() {
        var svgEl = this.$el.find("div.svg-canvas");
        // Raphael needs the element's width and height, which
        // is 0 until this.$el is in the DOM.
        var paper = Raphael(svgEl.get(0), svgEl.height(), svgEl.width());
        // ... draw some SVG...
    }
});

// Renders a collection of objects.
var ListView = Marionette.CollectionView.extend({
    itemView: ItemView,
    model: MyModel
});

// Main point of entry.
MyApp.show = function() {
    var collection = new MyCollection();
    var listView = new ListView({ collection: collection });
    MyApp.mainRegion.show(listView);
    collection.fetch();
};

7
задан Brant Bobby 4 June 2012 в 19:22
поделиться