Views define how the your application looks. It's should mostly be views that are responsible for what gets included into the DOM tree. For example, views create DOM elements such as headings, container elements, paragraphs and other elements that it fills with content. The content is usually given to the view by the controller (which, in turn, usually gets them from models).
$views.add('article', function(options)
{
// this here is the constructor function of the view. here we can
do something with options if we want to.
}, {
onStart: function() {
this.helloElement = $('.h1').show().html('Hello
world!').appendTo('body');
},
onStop: function() {
this.helloElement.remove();
}
});
var someView = $views.start('article', { key: 'value', key2:
'value2', key3: { subkey1: 'subvalue' } });
By doing this, you can start a view called article. When you start a view, a new instance of that view is created and returned to you (loaded into the someView variable in the example above). This means you can access the view methods directly from the controller like this: someView.[methodName]();
Passing variables to views
The second argument (called options) is meant for passing variables to the view. The keys (values) you pass in the second argument will end up being available from the constructor function of the view. In addition to that, these keys (and values) will get prototyped to that view instance, meaning they are available anywhere from the view via this.key and this.key2 and this.key3 . The prototyping only happens when the passed keys do not override any of the native (previously prototyped) methods.
$views.stop(someView);
this.listen('uri.changed', function() {
alert('Someone changed the URI!'); });
this.trigger('someEvent', { key1: 'data1',
key2: 'data2' });