Hi Chathura, I am not aware of your particular use-case. But it is always better to separate HTML stuff out from JavaScript which helps you to maintain in the long run. For that, try to use a client side JavaScrpt based templating framework as much as possible. There are many alternatives such as handlebars.js, dust.js(used by linkedin), jade etc.
UES team and the latest caramel framework uses handlebars framework. So, it would be better if everyone can stick into a single framework. Further, regarding your array iterating code, it would always be better to use event delegation concept. i.e. If you have 100 buttons, then registering onclick events for each and every button will eat up memory unnecessarily. Instead register a single onclick event to a parent element. Because of the event bubbling, any event take place on an HTML element will be propagated upwards if you haven't explicitly prevented. If you have any specific data, then you can embedded those using HTML5 data-* attributes[1]. Combining this with event delegation, you can achieve pretty decent UI performances. Please also refer the thread, I just posted on architecture, Proposing a components layer across all WSO2 UIs<http://markmail.org/message/kcnmbsicxf3aijfr> too. [1] http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes [2] https://github.com/component/component [3] http://www.w3.org/TR/components-intro/ [4] https://github.com/component/component/wiki/F.A.Q#what-about-web-components On Sun, Jun 2, 2013 at 12:57 AM, Manuranga Perera <[email protected]> wrote: > 1) > I am not sure what you referring to by "string templates". > but I'd like the following version better : > > var buildButton = $('<button id="bulid-2.3.0">Build</button>'); > $("#sandbox").append(buildButton); > buildButton.bind("click",function (){ > console.log(version); > }); > > is there any reason to use the version you have mentioned over this? > > > 2) > when using loop just wrap the loop body in a function to avoid dynamic > variables being overridden. > eg: > for (var i=0; i < 5; i++) { > (function (buttonId) { > var buildButton = $('<button>x</button>'); > buildButton.bind("click", function () { > console.log(buttonId); > }); > })(i); > } > > or just write loop body as a separate function , which some times can be > more readable > > function addButton(buttonId) { > var buildButton = $('<button>x</button>'); > buildButton.bind("click", function () { > console.log(buttonId); > }); > }; > > for (var i = 0; i < 5; i++) { > addButton(i); > } > > 3) > +1 for using 'incremental for loop' for arrays > > -- > With regards, > *Manu*ranga Perera. > -- *Ruchira Wageesha **Associate Technical Lead** & Member, Management Committee, Development Technologies* *WSO2 Inc. - lean . enterprise . middleware | wso2.com* * email: [email protected], blog: ruchirawageesha.blogspot.com, mobile: +94 77 5493444*
_______________________________________________ Architecture mailing list [email protected] https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
