Docs

Everything You Need to Know

Views

Intro

Truck Chassis

Views are magical unicorns. They take data and turn it into your app. Truck's View is very versitile. You can create a view with nothing and add functionality later. Or you can configure it all at once.

Views use reactive data binding. All binding is one-directional, making it easy to reason about. Whenever you modify a model that a view is bound to, the view updates automatically.

If you give a view an element and some data, view will attempt to extract a template from the element, then render it with the data. At any time you can change the template that the View uses, or change the model that the view uses. You can tell a template to render only a certain number of times. Or tell it to start rendering after a certain time. Or you can tell your template to automatically render at designated intervals. If you do this, View is smart enough to only render if the data it is using has changed, otherwise it waits until the next cycle.

You can wire up a view with events. If the events are targeting the element's descendants, they will be delegated on the element. Of course, you can also remove events from a view.

By default, View renders all markup unencoded, but you can configure a view to render data encoded, or limit it to just one template delimiter set. This helps prevent injection of malicious scripts in your document. If you are unsure where you should use encoding or not, please research the security threats this may expose in your app through cross site scripting with your current server setup.

You can think of Truck's views as components. A view can contain information about the element it is bound to, a model it is bound to, the template that it uses and events bound to the view's template elements. You create an instace of a view with the $.View() method:

var luminariesView = $.View({
  element: '#repeaterWithImages', 
  model: LuminariesModel,
  name: 'luminariesView',
  variable: 'person',
  template: 
  "<li class='comp'>\
    <img data-src='{= person.image }' alt=''>\
    <div>\
      <h3>\
        {= person.firstName } {= person.lastName }\
      </h3>\
    </div>\
  </li>",
  events: [
    {
      element: 'li',
      event: 'tap',
      callback: function() {
        console.log($(this).text());
      }
    }
  ]
});

ES6 Template Literals

If you are taking advantange of the new ES6 spec to build your app and transpiling to ES5 with Babel, Traceur or TypeScript, you can use ES6 template literals to define you View templates. Notice how much cleaner the template in the following version is compared to the version above:

var luminariesView = $.View({
  element: '#repeaterWithImages', 
  model: LuminariesModel,
  name: 'luminariesView',
  variable: 'person',
  template: 
  `<li class='comp'>
    <img data-src='{= person.image }' alt=''>
    <div>
      <h3>
        {= person.firstName } {= person.lastName }
      </h3>
    </div>
  </li>`,
  events: [
    {
      element: 'li',
      event: 'tap',
      callback: function() {
        console.log($(this).text());
      }
    }
  ]
});

Views are Flexible, You Should be Too

When defining views, use the coding style that works for you. If you prefer your templates in the markup, you can. You can put your templates in script tags in the place where they'll be rendered, or put them wherever you want. Or use plain HTML markup in place for your templates. Just put the class cloak on the parent element. If you prefer to write your DOM events separate, you can. If you prefer a more component-style approach as illustrated above, define your templates and events right in the view definition.