Falcon.View extends Falcon.Object

Views represent the logic for screens and widgets. They handle how models and collections are displayed and interacted with.

initialize new Falcon.View()

Initializes this class, this is called within the default constructor and is expected to be overridden by inheriting classes. Internally this also calls the Falcon.Object constructor to in initialize any 'defaults' or 'observables'. Any arguments that are passed into the native constructor will also be passed in as the arguments for the initialize method.

1 var DogView = Falcon.View.extend({
2 	initialize: function()
3 	{
4 		console.log("Initialized the Dog View");
5 	}
6 });
7 
8 new DogView(); // "Initialized the Dog View"
extend Falcon.View.extend( protoProps, [staticProps] )

Method used to create a new view that inherits from the base Falcon View.

protoProps
Properties for the prototype of a class
staticProps
Static properties for a given object
 1 var DogView = Falcon.View.extend({
 2 	bark: function()
 3 	{
 4 		console.log("The dog view barks");
 5 	}
 6 },{
 7 	says: function() {
 8 		console.log("Woof!");
 9 	}
10 });
11 
12 var my_dog_view = new DogView();
13 
14 DogView.says(); // Woof!
15 my_dog_view.bark(); // The dog view barks
url view.url

The url or element id where this template is defined. Can either be a string or a function and can either point to a uri or a DOM object identifier. This attribute should be overridden by any inheriting classes

 1 var DogUrlView = Falcon.View.extend({
 2 	url: "dog.tmpl"
 3 });
 4 
 5 var DogIdView = Falcon.View.extend({
 6 	url: "#dog"
 7 });
 8 
 9 var DogFunctionView = Falcon.View.extend({
10 	url: function() {
11 		return "dog.html"
12 	}
13 });
14 
15 var dog_url_view = new DogUrlView();
16 var dog_id_view = new DogIdView();
17 var dog_function_view = new DogFunctionView();
18 
19 Falcon.baseTemplateUrl = "http://www.falconjs.com/";
20 
21 console.log( dog_url_view.makeUrl() ); // http://www.falconjs.com/dog.tmpl
22 console.log( dog_id_view.makeUrl() ); // #dog
23 console.log( dog_function_view.makeUrl() ); // http://www.falconjs.com/dog.html
defaults view.defaults

This is a hash map of non-observable defaults to create whenever an instance of this view is initialized. If the value is a function, the function is called and the return value is assigned. Functions are called in context of this instance and with all the same arguments from the constructor method. Defaults are created before observables which means that any duplicate attributes between the observables (as in the 'observables' attribute on Falcon.Object) and default attributes will be overridden by those in the observables

 1 var DogView = Falcon.View.extend({
 2 	defaults: {
 3 		"is_tame": true,
 4 		"name": function(name) {
 5 			return ( name || "Fido" );
 6 		}
 7 	}
 8 });
 9 
10 var dog_view = new DogView();
11 console.log( dog.name ); // Fido
12 console.log( dog.is_tame ); // true
13 
14 var skip_view = new DogView("Skip");
15 console.log( skip_view.name ); // Skip
16 console.log( skip_view.is_tame ); // true
observables view.observables

This is a hash map of the default observables and values that will become properties of this view when a new instance is created. If the value of a specific key is a function a computed observable is created. If the value is an object with the keys 'read' and/or 'write' a computed is created with those object keys as the definition for the computed observable. All computed observables are created with this objects's instance as their context.

 1 var DogView = Falcon.View.extend({
 2 	observables: {
 3 		"name": "Fido",
 4 		"parent_dog_name": "",
 5 		"child_of_lassie": function(parent_dog_name)
 6 		{
 7 			return this.parent_dog_name() === "Lassie";
 8 		}
 9 	}
10 });
11 
12 var dog_view = new DogView(); // Dog not related to Lassie
13 
14 console.log( ko.isObservable( dog_view.name ) ); // true
15 console.log( ko.isComputed( dog_view.child_of_lassie ) ); // true
16 
17 console.log( dog_view.name() ); // Fido
18 console.log( dog_view.child_of_lassie() ); // false
19 
20 dog_view.name("Spot");
21 dog_view.parent_dog_name("Lassie");
22 
23 console.log( dog_view.name() ); // Spot
24 console.log( dog_view.child_of_lassie() ); // true
display view.display()

Executed when this view is displayed (added to the DOM). This method is called from the view binding when rendering this view's template is complete and added to the DOM. This should be overridden by inheriting classes and should primarily be used for 'on-display' functionality such as certain event handlers

 1 var DogView = Falcon.View.extend({
 2 	url: '#dog_view',
 3 
 4 	display: function()
 5 	{
 6 		console.log("Dog View Displayed")
 7 	}
 8 });
 9 
10 var view_model = {
11 	showing_dog_view: ko.observable(false),
12 	my_dog_view: new DogView()
13 };
14 
15 console.log("Initializing");
16 setTimeout(function() {
17 	view_model.show_dog_view(true)
18 }, 5000);
19 
20 Falcon.apply(view_model, '#application');
Application Javascript
1 <div id="application">
2 	<!-- ko if: showing_dog_view -->
3 		<!-- ko view: my_dog_view --><!-- /ko -->
4 	<!-- /ko -->
5 </div>
6 <template id="dog_view">
7 	This is the Dog View
8 </template>
Application HTML
1 ... my_dog_view is currently not rendered because showing_dog_view is set to false
2 => Initializing
3 ... Waits five seconds and then sets show_dog_view to true, my_dog_view
4 	is then rendered on the screen
5 => Dog View Displayed
Console Output
dispose view.dispose()

Executed when this view is disposed (removed from the DOM). This method is called from the unrender method which itself is called from the 'view' binding. This should be overridden by inheriting classes and should primarily be used for removing any 'on-display' functionality that was added in the display method

 1 var DogView = Falcon.View.extend({
 2 	url: '#dog_view',
 3 
 4 	dispose: function()
 5 	{
 6 		console.log("Dog View Displayed No Longer")
 7 	}
 8 });
 9 
10 var view_model = {
11 	showing_dog_view: ko.observable(true),
12 	my_dog_view: new DogView()
13 };
14 
15 console.log("Initializing");
16 setTimeout(function() {
17 	view_model.show_dog_view(false)
18 }, 5000);
19 
20 Falcon.apply(view_model, '#application');
Application Javascript
1 <div id="application">
2 	<!-- ko if: showing_dog_view -->
3 		<!-- ko view: my_dog_view --><!-- /ko -->
4 	<!-- /ko -->
5 </div>
6 <template id="dog_view">
7 	This is the Dog View
8 </template>
Application HTML
1 ... my_dog_view is currently rendered because showing_dog_view is set to true
2 =>  Initializing
3 ... Waits five seconds and then sets show_dog_view to false, 
4 	my_dog_view will no longer appear in the DOM
5 =>  Dog View Displayed No Longer
Console Output
is_loaded view.is_loaded()
Boolean Is the view loaded?

An observable that specifies if the view has loaded not. A view is loaded when its template is found and stored into the template cache. Making this an observable allows us to bind against it and for the 'view' binding to update properly.

makeUrl view.makeUrl()
String The full url to the template

Method used to 'intelligently' make a url to point to the remote version of this template. If the URL begins with a '#' it will leave the url as is because we're identifying an on-page template element to look up rather than a remote resource.

 1 	var DogUrlView = Falcon.View.extend({ url: "dog.tmpl" });
 2 	var DogIdView = Falcon.View.extend({ url: "#dog" });
 3 
 4 	var dog_url_view = new DogUrlView();
 5 	var dog_id_view = new DogIdView();
 6 
 7 	console.log( dog_url_view.makeUrl() ); // /dog.tmpl
 8 	console.log( dog_id_view.makeUrl() ); // #dog
 9 
10 	Falcon.baseTemplateUrl = "http://www.falconjs.com/";
11 
12 	console.log( dog_url_view.makeUrl() ); // http://www.falconjs.com/dog.tmpl
13 	console.log( dog_id_view.makeUrl() ); // #dog