I understand the reasoning behind the rails 3.1 asset pipeline: we pile all the JS in a neat, cacheable file to improve performance. Great we want that.
However, loading everything also means we've got to be very careful that we not use a certain ID or class on multiple pages, if we have some JS attached to it. Or else, the JS will fire on both pages, since its always loaded.
Now, what we want to achieve is the following:
* we want to keep everything in a single JS file (we know how we can load files separately, just don't want that)
* we want to namespace the JS in each controller_name.js so it's only loaded when the appropriate namespace is initialized
* we want to initialize the appropriate namespace by reading the current controller from say a data-attribute on the <body> tag of our layout
The problem is: we don't have a good idea how to implement in JS. Particularly, how should we namespace the JS and then dynamically initialize it based on the contents of a HTML tag..
Any help is greatly appreciated!
I understand the reasoning behind the rails 3.1 asset pipeline: we pile all the JS in a neat, cacheable file to improve performance. Great we want that.
However, loading everything also means we've got to be very careful that we not use a certain ID or class on multiple pages, if we have some JS attached to it. Or else, the JS will fire on both pages, since its always loaded.
Now, what we want to achieve is the following:
* we want to keep everything in a single JS file (we know how we can load files separately, just don't want that)
* we want to namespace the JS in each controller_name.js so it's only loaded when the appropriate namespace is initialized
* we want to initialize the appropriate namespace by reading the current controller from say a data-attribute on the <body> tag of our layout
The problem is: we don't have a good idea how to implement in JS. Particularly, how should we namespace the JS and then dynamically initialize it based on the contents of a HTML tag..
Any help is greatly appreciated!
Share Improve this question edited Dec 19, 2011 at 19:55 three 8,4783 gold badges37 silver badges40 bronze badges asked Dec 19, 2011 at 19:05 ErwinMErwinM 5,1312 gold badges25 silver badges36 bronze badges 1- Here is a blog post that has a few different approaches house9.blogspot./2011/05/rails-31-javascript-execution.html – house9 Commented Dec 20, 2011 at 3:15
2 Answers
Reset to default 16Here is a way to namespace everything on a controller/action level
- http://www.viget./inspire/extending-paul-irishs-prehensive-dom-ready-execution/
- above was inspired by http://paulirish./2009/markup-based-unobtrusive-prehensive-dom-ready-execution/
You basically declare you body as such
<body data-controller="<%= controller_name %>" data-action="<%= action_name %>">
And then these methods are called (which each have a series of methods -- so if you need something on every page, it's in mon/init. Or on all users actions, that's on users/init. Or only the users show page? that's users/show.
SITENAME.mon.init();
SITENAME.users.init();
SITENAME.users.show();
I've used this and it works very very well.
JsSpace.on('users', {
index: function(){
console.log('index action of users controller');
}
});
that pattern implemented by render controller and action into body attribute then fetch them and execute the match function. js-namespace-rails