<div dir="ltr"><div class="gmail_extra"><br><br><div class="gmail_quote">On 18 July 2013 12:55, 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 style="word-wrap:break-word"><div><div class="h5"><div><div>On Jul-18-2013, at 2:32 PM, Murray Steele <<a href="mailto:murray.steele@gmail.com" target="_blank">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>On Jul-17-2013, at 5:43 PM, Tim Cowlishaw <<a href="mailto:tim@timcowlishaw.co.uk" target="_blank">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>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><br></div><div>Can you elaborate on why you suggest your approach?  Is it performance related?  Or... ?</div></div></div></div>
</blockquote></div><div><br></div></div></div><div class="im">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></blockquote><div><br></div><div style>Thanks to Tejas for reposting his answer to my question when I foolishly only sent it to him.</div>
<div style><br></div></div></div></div>