<html><head><meta http-equiv="Content-Type" content="text/html charset=iso-8859-1"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><div>On Jul-18-2013, at 2:32 PM, Murray Steele <<a href="mailto:murray.steele@gmail.com">murray.steele@gmail.com</a>> wrote:</div><blockquote type="cite"><div dir="ltr"><div class="gmail_extra"><br><div class="gmail_quote">On 18 July 2013 05:44, Tejas Dinkar <span dir="ltr"><<a href="mailto:tejas@c42.in" target="_blank">tejas@c42.in</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div class="im">On Jul-17-2013, at 5:43 PM, Tim Cowlishaw <<a href="mailto:tim@timcowlishaw.co.uk">tim@timcowlishaw.co.uk</a>> wrote:<br>
><br>
> Therefore, has anyone got any tips or tricks for writing maintainable,<br>
> testable, well-factored javascript as part of a rails application<br>
> which has reasonably complex client-side behaviour, but isn't a<br>
> one-page app?<br><br></div>
3) As much as possible, pass in data to the javascript class being created, do not leave data lying around in the view. So avoid data- as much as possible. <button data-product-id=53>Order</button> new MyApp.OrderButton($("button")) should become <button>Order</button>, new MyApp.OrderButton($("button"), 53).<br>
Exception to this is multiple entities. Ex: <button data-product-id=53>Order</button><button data-product-id=54>Order</button>. Though the purist could argue that one could iterate through the buttons and bind individually.<br>
</blockquote><div> </div><div style="">I'm intrigued by this as it is the direct opposite of the approach and advice that seems to be favoured by most front-end type folk that I know. e.g. HTML has loads of data attributes, JS is included / triggered in the head or very bottom of the page, the scripts themselves use (maybe live) css data attribute queries to find elements and enhance them. </div>
<div style=""><br></div><div style="">Can you elaborate on why you suggest your approach? Is it performance related? Or... ?</div></div></div></div>
</blockquote></div><div><br></div>Not particularly. I've just found it easier to debug.<div><br></div><div>A more likely scenario would be something like this</div><div><br></div><div><div class="product"></div><div> <button>Order Now</button></div><div> <button>Add to Cart</button></div><div> <button>See Similar (in a popup)</button></div><div></div></div><div><br></div><div>It's usually easier for me to have a single: new App.ProductWidget($(".product"), product_id);</div><div><br></div><div>And I use routes-js to generate routes from the CoffeeScript:</div><div>$.post(Routes.order_product_path(product_id, format: json))</div><div><br></div><div>Plus, when there is some extra data that comes to describe my product, say a color, I just need to change it in a single place: new App.ProductWidget($(".product"), product_id, color_id) or something.</div><div><br></div><div>Performance is a happy side effect, but it isn't a problem on my current project.</div><div><div apple-content-edited="true">--<br>Tejas Dinkar<br><a href="http://www.nilenso.com/">http://www.nilenso.com</a><br>Nilenso Software (formerly C42 Engineering)</div></div></body></html>