CODEWITHSUNDEEP
ember.js
Otari
Otari

Reputation: 167

Call custom function when view is rendered, from one place and not repeating code for every view

in ember application i want to call my custom function which does some modifications of dom elements, the only solution i found is to repeat below code as many times as many views/routes i have

for example

rendering indexView

indexView = Ember.View.Extend({
    didInsertElement:function(){
       //my custom function call goes here.. myFunction();
    }
});

rendering OtherView

OtherView = Ember.View.Extend({
    didInsertElement:function(){
       //my custom function call goes here.. myFunction();
    }
});

rendering MoreView

MoreView = Ember.View.Extend({
    didInsertElement:function(){
       //my custom function call goes here.. myFunction();
    }
});

Is there a way of calling myfunction globaly whenever any view is rendered? I really do not want to repeat code for every single view i render.

thanks!

Upvotes: 2

Views: 323

Answers (3)

Kingpin2k
Kingpin2k

Reputation: 47367

There are two ways to handle this. Create a base class, or reopen the global View class and insert your code. I prefer the first, since it's easier to maintain and track down issues.

Reopen the View class and tack on an additional method that triggers on didInsertElement

Ember.View.reopen({
    doStuff:function(){
       //myFunction();
    }.on('didInsertElement')
});

In the case of debouncing

Ember.View.reopen({
    doStuff:function(){
       Ember.run.debounce(this.doRealStuff, 200);
    }.on('didInsertElement'),
    doRealStuff: function(){
      console.log('foo');
    }
});

http://emberjs.jsbin.com/gecoziwe/1/edit

Create a base class and extend from it (My preferred method, since it's easier to track down issues, can't say this enough)

App.BaseView = Ember.View.extend({
    doStuff:function(){
       //myFunction();
    }.on('didInsertElement')
});


App.FooView = App.BaseView.extend({

});

App.BarView = App.BaseView.extend({

});

Upvotes: 0

Hrishi
Hrishi

Reputation: 7138

I would use a mixin to do this. If, however, you find that you are using this mixin into every single view that you create, it might be better to reopen the Ember.View class and add this functionality there. Also,if you reopened the class, what you could do is, depending upon the use case, create a static function inside Ember.View.reopenClass which you would pass to a 

Ember.run.scheduleOnce()

utility that ember provides so that, if the function that you need doesn't need any state (for example, just does something to the page after the content has loaded or something.), it will just run the function once after all the views are rendered in the page.

Upvotes: 1

Zak
Zak

Reputation: 7078

You can create a Mixin:

App.SomeMixin = Ember.Mixin.create({
    didInsertElement: function() {
        this._super();
        //do your common stuff here
    }
});

And use it in your views:

App.SomeView = Ember.View.Extend(App.SomeMixin, {
    didInsertElement: function() {
        this._super();
        //do your custom stuff here
    }
});

Upvotes: 1

Related Questions