view.json

The name system

How can view.json work with multiple model layers?

It's all just events.

        Change events              Named events
[Model layer]   ==>   [ name system ] ==>  [ View layer ]
                <==   [             ] <==  [            ]
  Event registrations           Event registrations
      on instances                    on names

The on(eventname, callback) function

The on(eventname, callback) function.

The global event emitter

None is provided.

Feel free to use the one in jQuery, or your own:

Observables

There is nothing special about observables.

They are things that have a name, and that emit events related to that name.

Observable variables

// observable variable (via private closure)
window.currentTodo = (function() {
  var value = 0;
  return function(setTo){
    if(arguments.length > 0) {
      // set and emit event
      value = setTo;
      console.log('set', setTo);
      window.events.emit('list.current');
    }
    return value;
  }
}());

Observable models

Mapping:

function observable(name, model) {
  model.on('change', function(key, value) {
    emit(name);
  });
}

Observable collections

Locatables

Differences:

• Can be swapped with different items
• Do not need to exist and will not cause lookup errors

Locatable DOM elements

E.g. children of a parent view, not directly accessible.

Non-global scopes

A scope:

A place to look up information from.

Names are resolved within a scope. The default scope is global.

E.g. reusable view hierarchies through late-assignable names.

E.g. create a playlist which can be instantiated from a different set of data.

Rather than referring to fixed global names, refer to local names, allowing multiple instances.