- Lift Application Development Cookbook
- Gilberto T. Garcia Jr.
- 450字
- 2021-08-04 10:05:43
Transforming HTML elements using their IDs
Suppose you are building a page and you want to show some unique information, such as the user name and the total amount of a shopping cart; what would you do?
You will probably need to add the information that you want to show into some tags with a unique identifier.
This is exactly what we will learn to do in this recipe.
Getting ready
You can use the code from the examples we used in the recipes of the previous chapter or you can start a new project.
How to do it...
An HTML element can be transformed by using the following steps:
- Add the following code into the
index.htmlfile:<div data-lift="Calculator.plus"> 2 + 2 = <span id="result">some number</span> </div>
- Create a
Calculatorobject inside thesnippetfolder with the following code:import net.liftweb.util.BindHelpers._ object Calculator { def plus = "#result *" #> (2 + 2) } - Start the application and access
http://localhost:8080. You should see a page similar to the following screenshot:
How it works...
When working on a Lift application, the data-lift attribute in an HTML tag will search for a snippet to do the job.
Tip
If Lift does not find a snippet object or if the snippet object doesn't have the invoked method, Lift will show an error message when you try to access the page.
The text before the dot, Calculator, is the name of the snippet class or object and the text after the dot, plus, is the method that will be invoked.
In this example, we are telling Lift to invoke the Calculator object's plus method. Let's take a look at the plus method to see what it does.
The plus method has no parameters and its return type is CssSel.
The CssSel trait performs HTML transformations using CSS selectors. Its job is to get some HTML (scala.xml.NodeSeq), transform it, and then return the transformed HTML (a new NodeSeq).
Therefore, what is really happening here is that the plus method gets the content of the div tag and changes it.
When the plus method is invoked, it will search for the HTML tag that has id equal to "result", and change it by replacing the tag with result as the value of id, with the result of the evaluation of the expression 2 + 2.
You can see this by looking at the resulting HTML in your browser. The original snippet was:
<div data-lift="Calculator.plus"> 2 + 2 = <span id="result">some number</span> </div>
It was then changed to:
<div> 2 + 2 = <span id="result">4</span> </div>
Another thing you'll notice, is that there is no mention of the snippet in the resulting HTML.
See also
- To learn more about CSS selectors, please visit the following URL: http://simply.liftweb.net/index-7.10.html