Kitchen Sink

(

This is the only javascript used for this example:

//OpenForumDocumentation/OpenForumJavascript/KitchenSink/page.jsvar boundValue = "1234"; var boundList = [ { name: "John", age: 23 }, { name: "Paul", age: 27 }, { name: "Ringo", age: 31 }, { name: "George", age: 25 } ];

Using the standard javascript library included with OpenForum you can bind javascript variables onto a page. Changes in the variables value will be automatically updated on the page.

Bound Value = {{boundValue}}
Bound Value = {{boundValue}}

You can also bind variables to input fields. Changes in the input field will automatically update the javascript variable.

Bound Value = <input type="text" of-id="boundValue"/>
Bound Value = Try changing the value in the input field and see it change the display of the value on the page above. (

You can also bind tables onto a page like this:

Bound List = <table> <tr><td>Name</td><td>Age</td></tr> <tr of-repeatFor="beatle in boundList"><td>{{beatle.name}}</td><td>{{beatle.age}}</td></tr> </table>
Bound List =
NameAge
{{beatle.name}}{{beatle.age}}