Converting to CSS-based binding
Nolan Darilek
Hash: SHA1
I'm trying to convert some quite horrible namespace-based binding code
to CSS-based, and am a bit confused as to just how the templates bridge
with the code. It's a fairly simple form at the moment, asking for a
point name, providing a checkbox to indicate whether said point is a
beacon, then OK/Cancel buttons (It's a modal dialog.) Here's the HTML
for the form:
<div id="form" class="lift:point">
<p>
Name:<span id="name"/><br/>
<span id="beacon">Beacon<br/>
<span id="ok"/><span id="cancel"/>
</p>
</div>
I'm unsure of how to define my snippet class. Do I just plunk the
bindings directly into the class body? Or do I have to call a snippet
method like render, and somehow chain the bindings together in that?
I've looked around in the wiki and have found this example:
class HelloWorld {
def howdy = ".time" #> Helpers.formattedTimeNow
}
from
http://www.assembla.com/wiki/show/liftweb/Designer_Friendly_Templates.
This seems to suggest the latter, but how does the method know which XML
it's running against? Is it just running against the element content
indicated in the class attribute? If that's the case, do binds in the
class body act like the render method? If not, how would I chain
bindings? Having a hard time wrapping my head around this feature.
Here's what I have thus far.
object point extends
RequestVar[PersistentPoint](PersistentPoint.createRecord)
class Point {
private def close() = {
Updater.updatePointer
geolocation.is.map { g =>
Unblock & g.updateToolbar & g.updateNearby & Focus("point_cmds")
}.openOr(Unblock)
}
"#form" #> { n:NodeSeq => ajaxForm(n) }
"#name" #> ajaxText(
point.tags("name"),
{ n =>
point.tags.updated("name", n)
Noop // TODO: Update tags display accordingly
}
)
"#beacon" #> ajaxCheckbox(
point.pointType == "beacon",
{ v =>
if(v) point._type("beacon")
Noop
}
)
"#ok" #> ajaxSubmit(
"OK", { () =>
point.save
close()
}
)
"#cancel" #> ajaxSubmit(
"OK", { () =>
close()
}
)
}
Thanks.
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.10 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/
iEYEARECAAYFAkzsQR0ACgkQIaMjFWMehWK1DwCeL8ppsTUKwAQVgg//Ikeh0ZKh
1BMAnRmV7tDrfYHaSSszHiRnKiR8u4rI
=weEd
-----END PGP SIGNATURE-----
Graham Tackley
> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA1
>
> I'm trying to convert some quite horrible namespace-based binding code
> to CSS-based, and am a bit confused as to just how the templates bridge
> with the code. It's a fairly simple form at the moment, asking for a
> point name, providing a checkbox to indicate whether said point is a
> beacon, then OK/Cancel buttons (It's a modal dialog.) Here's the HTML
> for the form:
>
> <div id="form" class="lift:point">
> <p>
> Name:<span id="name"/><br/>
> <span id="beacon">Beacon<br/>
> <span id="ok"/><span id="cancel"/>
> </p>
> </div>
>
> I'm unsure of how to define my snippet class. Do I just plunk the
> bindings directly into the class body? Or do I have to call a snippet
> method like render, and somehow chain the bindings together in that?
> I've looked around in the wiki and have found this example:
>
> class HelloWorld {
> def howdy = ".time" #> Helpers.formattedTimeNow
>
> }
>
> it's running against? Is it just running against the element content
> indicated in the class attribute? If that's the case, do binds in the
> class body act like the render method? If not, how would I chain
> bindings? Having a hard time wrapping my head around this feature.
>
If you specify class="lift:point" lift will call a "render" method in
the point snippet. If you specify class="lift:point.howdy" it will
call a "howdy" method in the point snippet.
If you want to bind multiple css selectors together use "&". So you'd
probably end up with something like:
def render = "#name" #> ajaxText(
{ n =>
point.tags.updated("name", n)
Noop // TODO: Update tags display accordingly
}