Basic view architecture question about Durandal (and SPA im general)

[mlde...@gmail.com]

This is my first experience with SPA, as well as first time learning Durandal, and I'm still adjusting to the SPA concept that there's just 1 HTML page with constant DOM manipulation.    I'm concerned with things colliding with each other, not from a JS persepctive, since all JS code is modularized, but more from a markup/css/jquery selector perspective, and how html is managed in the DOM.  Can anyone help with these questions:

1. when a view is "swapped out" for another view, is the original kept in the DOM hidden?  Or is it physically removed from the DOM and stored somewhere as a string representation to be inserted back again if needed?

2. If I'm using JQuery selectors in my vm, selecting by either  an attribute or class, will hits be limited to the current view?  Or will I get hits from other views that may already have been loaded?  (assuming they're still in the DOM hidden).   Likewise for events that may be bound to a css class.  Will those events fire for elements not in the current view?

3. I know putting <style> sections directly in the html is not best practice, but if I have those in multiple views, will the styles be applied only to the view they're defined in, or could the styles leak out into other views (i.e. they become "global")?

thanks

[Rob Eisenberg]

1. Whether views are kept and hidden or completely removed depends on how you configure the compose binding (or the router binding). You get to control that. By default they are completly removed. To keep them around, set cacheViews:true on the binding. More information is here: http://durandaljs.com/documentation/Using-Composition/

2. We don't alter jQuery to scope selectors automatically. However, in the attached callback, you will be passed the view as the first parameter, so you can tell jQuery to scope your selectors very easily. See these docs for more information about the attached callback and interaction with the dom: http://durandaljs.com/documentation/Interacting-with-the-DOM/

3. The style tags you add in a view are not scoped, unless your browser supports the scoped style feature. See here" http://www.w3schools.com/tags/att_style_scoped.asp Unfortunately, that does not have wide browser support yet. In general, I would recommend that you use a css class to scope the view styles. You can place the class on the root node of the particular view, then use css rules to handle scoping any styles. This is particularly easy if you are using something like LESS, SASS or Stylus.

--
You received this message because you are subscribed to the Google Groups "DurandalJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to durandaljs+...@googlegroups.com.
Visit this group at http://groups.google.com/group/durandaljs.
To view this discussion on the web visit https://groups.google.com/d/msgid/durandaljs/d16db0a6-ce63-415d-8512-7c77cf8925d7%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--

Rob Eisenberg,

President - Blue Spire
www.durandaljs.com