CSS Selector bindings and attributes

Jeppe Nejsum Madsen

unread,

Nov 23, 2010, 4:46:26 PM11/23/10

to lif...@googlegroups.com

Hi,

I'm exploring the new CSS selector binding functionality and must say
that it rocks!

One thing I can't seem to figure out:

I need to bind lists but also supply different attributes for each
item in the list.

E.g I want to end up with this:

Note the different classes on the td elements. If I do

"#header *" #> plan.dates.map {_.toString}

they all get the weekday class.

Any way to solve this (besides moving the bind up to the tr and
generate the td's)

/Jeppe

David Pollak

unread,

Nov 24, 2010, 7:19:40 PM11/24/10

to lif...@googlegroups.com

On Tue, Nov 23, 2010 at 1:46 PM, Jeppe Nejsum Madsen <je...@ingolfs.dk> wrote:

Hi,

I'm exploring the new CSS selector binding functionality and must say
that it rocks!

One thing I can't seem to figure out:

I need to bind lists but also supply different attributes for each
item in the list.

E.g I want to end up with this:

<tr valign="top">
<td align="right" class="fieldname" style="width: 30%;" />
<td id="header" class="weekday" style="width: 10%">Ma 25-10</td>
<td class="weekday clearable" style="width: 10%">Ti 26-10</td>
<td class="weekday clearable" style="width: 10%">On 27-10</td>
<td class="weekday clearable" style="width: 10%">To 28-10</td>
<td class="weekday clearable" style="width: 10%">Fr 29-10</td>
<td class="weekend clearable" style="width: 10%">Lø 30-10</td>
<td class="weekend clearable" style="width: 10%">Sø 31-10</td>
</tr>

Note the different classes on the td elements. If I do

"#header *" #> plan.dates.map {_.toString}

"#header" #> plan.dates.map{ d => "* *" #> d.toString & "* [class]" #> (if (d.isWeekday) "weekday" else "weekend")}

they all get the weekday class.

Any way to solve this (besides moving the bind up to the tr and
generate the td's)

/Jeppe

--
You received this message because you are subscribed to the Google Groups "Lift" group.
To post to this group, send email to lif...@googlegroups.com.
To unsubscribe from this group, send email to liftweb+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.

--
Lift, the simply functional web framework http://liftweb.net
Beginning Scala http://www.apress.com/book/view/1430219890
Follow me: http://twitter.com/dpp
Blog: http://goodstuff.im
Surf the harmonics

Jeppe Nejsum Madsen

unread,

Nov 25, 2010, 4:41:47 AM11/25/10

to lif...@googlegroups.com

David Pollak <feeder.of...@gmail.com> writes:

> On Tue, Nov 23, 2010 at 1:46 PM, Jeppe Nejsum Madsen <je...@ingolfs.dk>wrote:
>
>> Hi,
>>
>> I'm exploring the new CSS selector binding functionality and must say
>> that it rocks!
>>
>> One thing I can't seem to figure out:
>>
>> I need to bind lists but also supply different attributes for each
>> item in the list.
>>
>> E.g I want to end up with this:
>>
>> <tr valign="top">
>> <td align="right" class="fieldname" style="width: 30%;" />
>> <td id="header" class="weekday" style="width: 10%">Ma 25-10</td>
>> <td class="weekday clearable" style="width: 10%">Ti 26-10</td>
>> <td class="weekday clearable" style="width: 10%">On 27-10</td>
>> <td class="weekday clearable" style="width: 10%">To 28-10</td>
>> <td class="weekday clearable" style="width: 10%">Fr 29-10</td>
>> <td class="weekend clearable" style="width: 10%">Lø 30-10</td>
>> <td class="weekend clearable" style="width: 10%">Sø 31-10</td>
>> </tr>
>>
>> Note the different classes on the td elements. If I do
>>
>> "#header *" #> plan.dates.map {_.toString}
>>
>
> "#header" #> plan.dates.map{ d => "* *" #> d.toString & "* [class]" #> (if
> (d.isWeekday) "weekday" else "weekend")}

Nice, that works (after changing from M1 to SNAPSHOT).

I'm still trying to wrap my head around these bindings. My only info for
the CSS binding style is from
http://www.assembla.com/wiki/show/liftweb/Binding_via_CSS_Selectors (I
haven't read the source yet :-) and I can't quite seem to connect the above
code with the info on the wiki page.

My interpretation:

1) "#header" is bound to a List[NodeSeq=>NodeSeq]. Is there an implicit
that converts to IterableFunc?
2) Each of the NodeSeq=>NodeSeq gets called with the #header element as input
3) The "* *" (the first "*" which I can't see from the Wiki) means "replace child
content on all elements"?
4) The "* *" & "* [class]" functions are combined to a single
NodeSeq=>NodeSeq. Which one is applied first? Is it left to right? Or
functional composition?

This seems immensely powerful but also need some time (for me at least
:-) to sink in....

/Jeppe

David Pollak

unread,

Nov 25, 2010, 9:28:25 AM11/25/10

to lif...@googlegroups.com

I don't think so. I think it's an IterableConst implicit def itNodeSeqFunc(it: Iterable[NodeSeq => NodeSeq]): IterableConst

2) Each of the NodeSeq=>NodeSeq gets called with the #header element as input

Yes

3) The "* *" (the first "*" which I can't see from the Wiki) means "replace child
content on all elements"?

The first * means match all elements. The second means replace the child elements.

4) The "* *" & "* [class]" functions are combined to a single
NodeSeq=>NodeSeq. Which one is applied first?

Yes.

Is it left to right? Or
functional composition?

It's functional composition.

This seems immensely powerful but also need some time (for me at least
:-) to sink in....

Yeah and it's been evolving rapidly based on feedback from Graham and Bufferine and others.

/Jeppe

--
You received this message because you are subscribed to the Google Groups "Lift" group.
To post to this group, send email to lif...@googlegroups.com.
To unsubscribe from this group, send email to liftweb+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.

Reply all

Reply to author

Forward