Extendible helper views in ember

Question

So, I was hoping to be able to create a helper (master) view for my application, the main reason is that I want to implement a resize function.

Example.

App.View = Ember.View.extend({
    init: function() {
       $(window).resize(this.resize.bind(this));
       this._super();
    }
});

And then extend it

App.AmazingView = App.View.extend({
   resizing: false,
   resize: function() {
     this.set('resize', true);
   }
});

So, that's an example of what I wanted to achieve, but unfortunately it causes some problems.

If I go to the route that is using the Amazing view then everything works fine, it's only until you navigate around the application after and then return to that same route I face the following error.

Uncaught Error: Something you did caused a view to re-render after it rendered but before it was inserted into the DOM.

I'm pretty sure this is happening because I'm extending that view, any ideas on why this happens or what I should actually be doing?

score 2 · Answer 1 · answered Nov 21 '13 at 23:46

When you do $(window).resize(this.resize.bind(this)); you are attaching an event not managed for ember. When you leave the view, transitioning to other route, ember will cleanup event listeners and destroy the view. Now your view is in a "dead" state. But the resize handler is still present and when it triggers, a change is performed in a dead view. I think that it is causing your problem.

You can use the didInsertElement and willClearRender to bind and unbind your event.

App.View = Ember.View.extend({
    _resizeHandler: null,
    didInsertElement: function() {
       this._super();
       // we save the binded resize function to keep the identity, so unbind will remove
       this._resizeHandler = this.resize.bind(this);
       $(window).bind('resize', this._resizeHandler);
    },
    willClearRender: function() {
       this._super();
       $(window).unbind('resize', this._resizeHandler);
    }
});

Thanks, but the problem still persist's – iConnor Nov 22 '13 at 02:21 — iConnor, Nov 22 '13 at 02:21

score 1 · Accepted Answer · answered Nov 22 '13 at 00:16

1

This sound like a feature that would fit perfectly into an ember mixin. This solution would offer more flexibility, then you could extend other views and also provide the resize features...

http://emberjs.com/api/classes/Ember.Mixin.html

answered Nov 22 '13 at 00:16

Sebastien Chartier

130
1
3

Thanks, in fact I did try this, but turns out I was using `extend` instead of `create` on the `Mixin` `:)` – iConnor Nov 22 '13 at 02:25

Extendible helper views in ember

2 Answers2