Imba Router

For most Single Page Applications, it’s recommended to use the imba-router library. Check out this 6-part interactive screencast.

require 'imba-router'

tag Home
    def render
        <self> "Home"

tag About
    def render
        <self> "About"

tag App
    def render
        <self>
            <header>
                <a route-to='/home'> "Home"
                <a route-to='/about'> "About"
            <Home route='/home'> 
            <About route='/about'>

var Imba = require('imba'), _1 = Imba.createElement;
require('imba-router');

var Home = Imba.defineTag('Home', function(tag){
	tag.prototype.render = function (){
		return this.$open(0).setText("Home").synced();
	};
});

var About = Imba.defineTag('About', function(tag){
	tag.prototype.render = function (){
		return this.$open(0).setText("About").synced();
	};
});

var App = Imba.defineTag('App', function(tag){
	tag.prototype.render = function (){
		var $ = this.$;
		return this.$open(0).setChildren($.$ = $.$ || [
			_1('header',$,0,this).setContent([
				_1('a',$,1,0).setRouteTo('/home').setText("Home"),
				_1('a',$,2,0).setRouteTo('/about').setText("About")
			],2),
			_1(Home,$,3,this).setRoute('/home'),
			_1(About,$,4,this).setRoute('/about')
		],2).synced((
			$[1].end(),
			$[2].end(),
			$[3].end(),
			$[4].end()
		,true));
	};
});