I am writing a small web app in Google Apps Script. I've split the app up into several tabs, each of which performs a specific task. To facilitate maintainability, I've written a module to control each tab.
I'm having trouble conceptualizing how to bind each module to its appropriate tab. The code below shows how I'm attempting to set up each tab via its module's init script when the 'tabscreate' message is sent.
HTML
<div id="tabs">
<ul>
<li><a href="#tab1"/></li>
<li><a href="#tab2"/></li>
<li><a href="#tab3"/></li>
</ul>
</div>
<div id="tab1"><button></div>
<div id="tab2"><button></div>
<div id="tab3"><button></div>
Script:
$(
$('#tabs').tabs()
);
var tab1 = (function(){
function init(){
//...set up tab here
}
return {init: init};
}());
//repeat above for each tab
I know I can do...
$('#tab1').on('tabscreate',function(){
tab1.init();
});
...but I don't want to have to manually create bindings for every function. I want each tab to call its own init function when tabs are created.
I imagine doing something like this:
$('#tabs').on('tabscreate',<call your init function>)
First of all, is my approach to this problem valid? This is my first real web app, and I've had trouble pinning down an approach that fits my needs. I'm open to any suggestions.
Second, if this approach is ok, how can I achieve what I'm describing in the last code snippet above?
