Enyo: Up and Running

Chapter 5. Writing Data-Driven Applications

Enyo provides first-class support for creating rich, data-driven applications. Along with the data binding and observer features we touched on briefly in Chapter 2, there are models, collections, data-driven controls, and ways to synchronize data with remote data sources. In this chapter we’ll explore these concepts and components.

Models

The bindings in Enyo work with any Object, which makes it easy to associate the data from one component to another. Sometimes, however, the data that needs binding doesn’t live neatly within any one component in the app. To handle such situations, Enyo has Model. Model, which is not actually an Object but does support get() and set(), is designed to wrap plain-old JavaScript objects and make the data available for binding. The following illustrates the creation of a simple model:

var restaurant = new enyo.Model({
    name: 'Orenchi',
    cuisine: 'Japanese',
    specialty: 'ramen'
});

You can derive from Model to create new model types and specify default attributes and values:

enyo.kind({
    name: 'RestaurantModel',
    kind: 'enyo.Model',
    attributes: {
        name: 'unknown',
        cuisine: 'unknown',
        specialty: 'unknown',
        rating: 0
    }
});

Whenever a RestaurantModel is instantiated, the defaults will be applied to any properties whose values are not explicitly defined:

var mcd = new RestaurantModel({ name: 'McDonalds' });

mcd.get('specialty');
// returns 'unknown'

Tip

Try it out: jsFiddle.

Tip

In this sample and some that follow, there is an ...