Quick Start

Make a Model, Bind it to a View

Basic Markup

First we need to import a stylesheet and TruckJS. 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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Truck - Demo</title>
  <link rel="stylesheet" href="truck-ios.css">
  <script src="truck.min.js"></script>
</head>
<body>
  <screen>
    <nav>
      <h1>Truck 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

Create a Model

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' }
];

Now we can turn the data into a model. To do that we use $.Model, which takes two arguments, the data to use in the model, and a handle which the model will use to notify the system of any changes:

var PeopleModel = $.Model(people, 'people-model');
Learn More About Models

Define a View

Now that we have a template and a model, we can create the view. We do that using $.View. A view needs at least an element with a template and some data. Since we have a template in the markup and a model, we're ready to go. The last line tells Truck to rener the view:

var PeopleView = $.View({
  element: '#peopleList',
  model: PeopleModel,
  // Use this variable in the template:
  variable: 'person'
});
PeopleView.render();
Learn More About Views

By providing the view with a model, Truck binds it to the model by creating a controller for us. Any changes we make to the model will propogate to the view. Because we provided the element #peopleList, Truck extracts its template and renders it with the model PeopleModel.

When we load this in the browser, we get this:

Tutorials