CSS Selector class replacement

72 views
Skip to first unread message

Stevo

unread,
Dec 2, 2010, 8:48:35 AM12/2/10
to Lift
Given this HTML:

<article class="comment"></article>

Why does this:

".comment" #> <article class={"comment" + post.id}></article>

replace the original HTML with

<article class="comment15 comment"></article>

instead of just

<article class="comment15"></article>

Let me know and best regards,


Steve
--

Derek Williams

unread,
Dec 2, 2010, 10:25:39 AM12/2/10
to lif...@googlegroups.com

When you return a NodeSeq like that it gets merged with the original. I think what you want is more like this (untested):

".comment [class]" #> "comment"+post.id

> --
> 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.
>

David Brooks

unread,
Dec 2, 2010, 10:28:46 AM12/2/10
to lif...@googlegroups.com
On 2 Dec 2010, at 15:25, Derek Williams wrote:

> When you return a NodeSeq like that it gets merged with the original. I
> think what you want is more like this (untested):
>
> ".comment [class]" #> "comment"+post.id

There's also a neat appending feature:

".comment [class+]" #> post.id

Cheers,
D

Mads Hartmann Jensen

unread,
Dec 2, 2010, 12:04:41 PM12/2/10
to lif...@googlegroups.com
Note that changing the class attribute will always append the class (not replace existing classes). 

From the wiki:

"[attr] (e.g.,“#id [href]” ) replaces the matching attribute’s value with the values (note in the case of theclass attribute, the values are appended to the element’sclass attributes)."

David Pollak

unread,
Dec 2, 2010, 12:33:04 PM12/2/10
to lif...@googlegroups.com
On Thu, Dec 2, 2010 at 9:04 AM, Mads Hartmann Jensen <mad...@gmail.com> wrote:
Note that changing the class attribute will always append the class (not replace existing classes). 

From the wiki:

"[attr] (e.g.,“#id [href]” ) replaces the matching attribute’s value with the values (note in the case of theclass attribute, the values are appended to the element’sclass attributes)."

By default, Helpers.bind() did not merge attributes.  I changed the strategy with CSS Selector Transforms.  Is the change good or bad?
 

On Dec 2, 2010, at 4:28 PM, David Brooks wrote:

On 2 Dec 2010, at 15:25, Derek Williams wrote:

When you return a NodeSeq like that it gets merged with the original. I
think what you want is more like this (untested):

".comment [class]" #> "comment"+post.id

There's also a neat appending feature:

".comment [class+]" #> post.id

Cheers,
D

--
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.


--
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

David Brooks

unread,
Dec 2, 2010, 1:23:14 PM12/2/10
to lif...@googlegroups.com
On 2 Dec 2010, at 17:33, David Pollak wrote:

> On Thu, Dec 2, 2010 at 9:04 AM, Mads Hartmann Jensen <mad...@gmail.com>wrote:
>
>> Note that changing the class attribute will always append the class (not
>> replace existing classes).
>>
>> From the wiki:
>>
>> "[attr] (e.g.,“#id [href]” ) replaces the matching attribute’s value with
>> the values (note in the case of theclass attribute, the values are appended
>> to the element’sclass attributes)."
>>
>
> By default, Helpers.bind() did not merge attributes. I changed the strategy
> with CSS Selector Transforms. Is the change good or bad?

I realise this question probably wasn't aimed at me, but I greatly prefer the [...+] syntax to the previous version (which made a special case for class attributes).

That said, [...+] seems to have introduced another special case for class:

".todo [class+]" #> "extra"

adds an extra space between the existing and new classes:

<span class="todo" /> -> <span class="todo extra" />

whereas this one:

"#todo [id+]" #> "extra"

appends id strings without a space:

<span id="todo" /> -> <span id="todoextra" />

I think it's unnecessary to make the special case of class here: it's easy to append a string with an extra space manually - e.g. " extra" - but it's hard to append without the extra space, should you want to.

Would it be possible to change #> so that it accepts a (String) => String on the RHS? Alternatively, would you consider making a special case of attributes (as with AttrBindParam in the old binding system)? By providing another method (e.g. #~>) that accepts a (String) => String, these sorts of manipulations might be a bit more natural.

I'm really loving the power flexibility of #>, by the way... #> { NodeSeq => NodeSeq } is a godsend!

Cheers,
D

David Pollak

unread,
Dec 2, 2010, 1:35:59 PM12/2/10
to lif...@googlegroups.com
On Thu, Dec 2, 2010 at 10:23 AM, David Brooks <davidjam...@gmail.com> wrote:
On 2 Dec 2010, at 17:33, David Pollak wrote:

> On Thu, Dec 2, 2010 at 9:04 AM, Mads Hartmann Jensen <mad...@gmail.com>wrote:
>
>> Note that changing the class attribute will always append the class (not
>> replace existing classes).
>>
>> From the wiki:
>>
>> "[attr] (e.g.,“#id [href]” ) replaces the matching attribute’s value with
>> the values (note in the case of theclass attribute, the values are appended
>> to the element’sclass attributes)."
>>
>
> By default, Helpers.bind() did not merge attributes.  I changed the strategy
> with CSS Selector Transforms.  Is the change good or bad?

I realise this question probably wasn't aimed at me, but I greatly prefer the [...+] syntax to the previous version (which made a special case for class attributes).

That said, [...+] seems to have introduced another special case for class:

 ".todo [class+]" #> "extra"

adds an extra space between the existing and new classes:

 <span class="todo" />  ->  <span class="todo extra" />

whereas this one:

 "#todo [id+]" #> "extra"

appends id strings without a space:

 <span id="todo" />  ->  <span id="todoextra" />

I think it's unnecessary to make the special case of class here: it's easy to append a string with an extra space manually - e.g. " extra" - but it's hard to append without the extra space, should you want to.

I strongly disagree about the special case for "class"  The class attribute is always treated as space-separated.
 

Would it be possible to change #> so that it accepts a (String) => String on the RHS? Alternatively, would you consider making a special case of attributes (as with AttrBindParam in the old binding system)? By providing another method (e.g. #~>) that accepts a (String) => String, these sorts of manipulations might be a bit more natural.

I'm really loving the power flexibility of #>, by the way... #> { NodeSeq => NodeSeq } is a godsend!

Cheers,
D

--
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.

Mads Hartmann Jensen

unread,
Dec 2, 2010, 3:45:12 PM12/2/10
to lif...@googlegroups.com
On Dec 2, 2010, at 6:33 PM, David Pollak wrote:



On Thu, Dec 2, 2010 at 9:04 AM, Mads Hartmann Jensen <mad...@gmail.com> wrote:
Note that changing the class attribute will always append the class (not replace existing classes). 

From the wiki:

"[attr] (e.g.,“#id [href]” ) replaces the matching attribute’s value with the values (note in the case of theclass attribute, the values are appended to the element’sclass attributes)."

By default, Helpers.bind() did not merge attributes.  I changed the strategy with CSS Selector Transforms.  Is the change good or bad?

I really like that it merges attributes. 
Reply all
Reply to author
Forward
0 new messages