Docs

Everything You Need to Know

Views

Intro

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

A view's data binding is one-directional, making it easy to reason about. After modifying your data, just render the view. It will automatically use the current state of the data. If you define your view to use a model, whenever you modify the model's data, the view will render automatically.

When you define a view, you can put the template in an element. When you assign that element to your view, it will extract the template from the element. Or you can define the template directly on the view. At any time you can change the template that a view uses, or change the model that it is bound to as well.

You can also define events for a view. 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 at any time.

By default, ChocolateChip-UI encodes any HTML or JavaScript in the data before rendering it in a view. You can tell a view to render data unencoded, but you should only do this with data you can trust. Automatic encoding helps prevent injection of malicious scripts in your document.

You create an instance 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 ES6 (ECMAScript 2015) to build your app using JSPM, you can use ES6 template literals to define your view templates. In the following example, notice how much cleaner the template 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

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 or template tags, or put the raw template directly in the element. This way your template is right where it will be rendered. However, keeping everything definined in the view makes it easy to find and reason about what a view is doing. We recommend defining your templates and events directly in your views. This makes it easier to reuse a view in another project.