Masterview users - Oct 2007 - conditional styling of html elements whithout element duplication

Hi,

first of all I think MasterView is a very useful tool. Good work!

I''m struggling to get the following working: I have a menu consisting
of several links. Dependent on the current controller action, the according
menu link should be styled differently than the other links.
My current solution is to do this for each menu option:

<li><a mv:if="@current_page == ''home''"
href="home.html" mv:link_to=":action
=> ''index''"><strong
class="selected">Home</strong></a>
<a mv:else="" href="home.html" mv:link_to=":action
=> ''index''">Home</a></li>
..
..

However, this doesn''t work very nicely, as the static html shows each
menu
option twice.
Also it seems a bit awkward. Another idea I had is to use something like
this:

<li mv:attr=":class => #{ if @selected == ''home''
''selected'' else
''not_selected'' end }"> <a href="new.html"
mv:link_to=":action =>
''index''">Home</a></li>

This doesn''t compile as the erb #{ if @selected ==
''home'' ''selected'' else
''not_selected'' end } isn''t correct,
I could use erb directly I guess, like this

{{{ if @selected == ''home'' }}}

<li class="selected" >...</li>

{{{ else }}}

<li class="not-selected" >...</li>

{{{ end }}}

But than I have the double links again.

Is there a good way of achieving what I want? Conditional styling of page
elements while keeping only one alternative in the static html
seems quite an essential thing to me. Anyway, I''m new to rails and
MasterView, so I might have overlooked some more obvious solution.

Nico
<nico.ritsche at googlemail.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://rubyforge.org/pipermail/masterview-users/attachments/20071026/115ef470/attachment.html

Nico,
>> doesn''t compile as the erb #{ if @selected ==
''home'' ''selected'' else
''not_selected'' end } isn''t correct

If you want to write that sort of expression, use the ruby ternary 
operator - it''s more concise and clearer:

   condition ? if_true : if_false

So your markup idea:

   <li mv:attr=":class => #{ if @selected == ''home''
''selected'' else
''not_selected'' end }">...link...</li>

would be:

   <li mv:attr=":class => #{ @selected == ''home'' ?
''selected'' :
''not_selected''}">...link...</li>

Similar technique could be used with your first markup approach, where 
you applied styling on the link label rather than on the containing 
<li> element holding the nav link - use the ternary operation notation

   <li><a href="home.html" mv:link_to=":action =>
''index''">{{{=
(@current_page == ''home'' ?
''<strong>Home</strong> : ''Home''
}}}</a></li>

or perhaps avoid repeating the actual label by conditional subst:

   <li><a href="home.html" mv:link_to=":action =>
''index''">{{{=
(@current_page == ''home'' ?
''<strong>%s</strong> : ''%s'')
%''Home''
}}}</a></li>

Next step would be to simplify the template markup.  A good technique 
would be to encapsulate the whole notion of "is the page [action] which 
is the target of this nav link the current view?" as a method in your 
controller class, rather than bolting your views down to inst var refs 
and explicit dependence on the controller implementation.  Do something 
like defining a predicate method isCurrentPage which takes the 
page/action name as arg:

   <li mv:attr=":class => #{ isCurrentPage(''home'')
? ''selected'' :
''not_selected''}">...</li>

This is still rather repetitous markup, as each link in your nav area 
would need this expression, but if you only have to define the nav 
feature once (say, in a layout) that''s probably acceptable.

If you have to write this sort of expression in a lot of places a 
custom masterview directive can be a good solution.  Creating your own 
directive for emitting the markup for a linkn would let you customize 
the attribute markup so your templates have a simpler notation to 
express the desired link, with the details of styling and the link 
reference handled in one place in the directive implementation.

~ Deb