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