DOM element getting replaced on Form Render

[alikefia]

I am not able to place a form in a fixed DOM element (view el = '#foo') and this is due to setElement call on Form.render. Compared to Marionette behaviour, I prefer the latter (this.$el.html(html);) Is there any reason for this ?

[powmedia]

Yes, it's to do with the way templating works. But you can either wrap the form in another view or override the render method

[alikefia]

Thx for quick response.

1. It is what I am doing (wrapping in Marionette regions)
2. tried it but render is a heavy method (will need to recheck on each upgrade)

[spectras]

Splitting render() method to be more modular would be great indeed. It could, for instance, be split in a renderTemplate, a attachFields… methods, render just calling each in order. That would make it much easier to customize.

@alikefia > for Marionette integration, I override render() like this in my project:

        render: function () {
            var self = this, $oldEl = self.$el;
            self.triggerMethod('before:render', self);
            Form.prototype.render.call(self);
            // work around improper rendering in Form
            $oldEl.off().replaceWith(self.$el);
            self.triggerMethod('render', self);
            return self;
        }

That will still discard any event handler you may have attached to the form's el, but apart from that it makes it work like a standard Marionette view. Including triggering the before:render and render events.

[Blasz]

One should not have to reattach the element to the DOM upon each render call. This needs to be documented, especially now that #363 has been landed.