Crude Falcon View Example

by stoodder

HTML

<script src="http://stoodder.github.io/falconjs/scripts/falcon.min.js"></script>
<div id="application"></div>
<template id="layout_view_tmpl">
	<button data-bind="click: $view.showDogView">Show Dog View</button>
	<button data-bind="click: $view.showCatView">Show Cat View</button>
	<hr />
	<!-- ko if: $view.showing_dog_view -->
		<!-- ko view: $view.dog_view --> <!-- /ko -->
	<!-- /ko -->
	<!-- ko ifnot: $view.showing_dog_view -->
		<!-- ko view: $view.cat_view --> <!-- /ko -->
	<!-- /ko -->
</template>
<template id="dog_view_tmpl">
	Showing the dog view!
</template>
<template id="cat_view_tmpl">
	Showing the cat view!
</template>

JavaScript

var DogView = Falcon.View.extend({ url: '#dog_view_tmpl' });
var CatView = Falcon.View.extend({ url: '#cat_view_tmpl' });

var LayoutView = Falcon.View.extend({
	url: '#layout_view_tmpl',

	initialize: function() {
		this.showing_dog_view = ko.observable( false );
		this.dog_view = new DogView();
		this.cat_view = new CatView();
	},

	showDogView: function() { this.showing_dog_view( true ); },
	showCatView: function() { this.showing_dog_view( false ); }
});

Falcon.apply( new LayoutView, "#application" );