In the previous step we bound to a REST data source. We only displayed the first record. In a real application one must be able to navigate the rows.
There is a lot to unpack here. Fortunately despite how much we introduced here, it is all quite simple.
Text [=page.Users.Index:+] of [=page.Users.Count] users loaded.
Here we don’t use the . or data. prefix for data binding. Those bind to the current row (cursor) of the data. Here we want to bind to the data source object itself and not the data. To do this we use page.<object name> instead. This allows us to display the current record number and the total count of records using markdown and data binding to properties of the data object.
The .Index property is zero based, but humans typically start counting from one. We do not want to display 0 of x records, but instead 1 of 10 records when we are on the first record. To adjust for this, we use a formatter with our data binding. Formatters alter the output and can be used to do many things, but in this case we simply want to increase the value by one which we do with the + character. The : specifies that a formatter is to follow the data binding expression.
JQUI.ProgressBar:Progress Max: =page.Users.Count Value: =page.Users.Index:+ ]
Here we use the same data binding expressions, but instead of using text and markdown to display, we bind properties of a JQueryUI progress bar instead.
Button:NextButton Text: Next Enabled: =page.Users.EOF:! ClientEvents.Clicked: this.Users.MoveNext(); ]
For our button we perform two tasks.
First we control if the button is enabled or not. Once the end of the rows are reached, we use data binding to disable the button to signal to the user that next is no longer applicable.
Note that we use a formatter here again. In this case we use the ! formatter to flip the boolean value of EOF to match what the .Enabled property needs.