Quick Start
Define a View, Render with Data
Basic Markup
First we need to import a stylesheet and ChocolateChip-UI. Then we define a template. This will be used by our view. Our data will be an array of people so we are going to use the term "person" to refer to an individual in our template. Each person will have a first name and a last name. The template is in the element #peopleList
. The {=
and }
markers are used to indicate variable that should be interpolated by ChocolateChip-UI:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ChocolateChip-UI - Demo</title> <link rel="stylesheet" href="css/chui-ios.css"> <script src="js/chui.min.js"></script> <script type="application/json" src="js/chui.min.js.map"></script> </head> <body> <screen> <nav> <h1>ChocolateChip-UI is Fun</h1> </nav> <section> <ul class="list" id='peopleList'> <li> <div> <h3>{= person.firstName }</h3> <h4>{= person.lastName }</h4> </div> </li> </ul> </section> </screen> </body> </html>Learn More About Templates
Data for the View
Below is the data we will use.
var people = [ { firstName: 'Joe', lastName: 'Bodoni' }, { firstName: 'John', lastName: 'Doe' }, { firstName: 'Wobba', lastName: 'Rango' }, { firstName: 'Josh', lastName: 'Rutherford' } ]; // Define a model for the data: var peopleModel = $.Model(people, 'people-model');
Define a View
Now that we have a template and some data, we can create the view. We do that using $.View
. We need to tell the view what element to render the view in, what template to use, and what data. The last line tells ChocolateChip-UI to render the view:
var peopleView = $.View({ element: '#peopleList', // Bind the view to this model: model: peopleModel, // Use this variable in the template: variable: 'person' }); // Render the view: peopleView.render();Learn More About Views
See the live example: Simple List.
Tutorials