Dean.js

by Sven Esenschmidt

HTML

<script src="https://github.com/fate/dean-js/raw/master/dean-min-yc.js"></script>
<div id="location">Hash: <span class="hash"></span></div>
<div id="navigation">
    <ul>
        <li><a href="#!/">Simple Page</a></li>    
        <li><a href="#!/mustache">Mustache.js Example</a></li>  
        <li><a href="#!/yql">YQL Example</a></li>    
    </ul>
</div>
<div id="main">

</div>
<div id="info">
    Visit <a href="http://github.com/fate/dean-js" target="_blank">github.com/fate/dean-js</a>
</div>

CSS

body {
    font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;  
    font-size: 13px;
}

div#location {
    padding: 2px 3px;
    font-size: 11px;
    border-bottom: 1px solid #ccc;
    color: #999;
    margin: 0 0 5px 0;
}

div#location span.hash {
    color: #333;
}

div#navigation {
    border-bottom: 1px solid #ccc;
}

div#navigation ul {
    margin: 0 0 10px 10px;
}

div#navigation ul li {
    list-style: circle;
    list-style-position: inside;
}

div#main {
    marign: 10px;
    padding: 10px;
    background: #f5f5f5;
}


div#info {
    color: #999;
    font-size: 11px;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #ccc;
    display: block;
    width: 100%;
    margin: 0px 10px 10px 10px;
    padding: 2px 3px;
}
div#info a {
    color: #333;
    text-decoration: none;
}
div#info a:hover {
    text-decoration: underline;
}

JavaScript

var app = new Dean.Application('#main', function() {
    
    this.options({
        base: '#!/',
        throw_errors: false
    });
    
    // executed before each route dispatch
    this.before(function() {
        // write the current route into an element, cause we can't see it in the url bar
        var bar = document.getElement('div#location span.hash');
            bar.set('text', window.location.hash);  
        
        // clear the page body
        this.clear();        
    });
    
    this.get('#!/', function() {
        new Element('div', {text: 'Simple Page'}).inject(this.getElement());
    });
    
    // Mustache Plugin
    this.use(Dean.Template.Mustache);
    this.get('#!/mustache', function() {
        var html = this.mustache('<b>Mustache: You have a nice beard, {{name}}!</b>', {name: 'Dude'});
        new Element('div', {html: html}).inject(this.getElement());
    }); 

    // YQL Plugin with Mustache flavour
    this.use(Dean.Service.YQL);
    this.use(Dean.Template.Mustache);
    this.get('#!/yql', function() {
        this.yql('SELECT id, name, url from music.artist.similar WHERE id="306489" LIMIT 5', function(response) {
 
            var tpl = "<h3>Artists simliar to Alexisonfire (pulled with YQL)</h3>" +
                       "<ul> {{#Artist}}<li>" +
                       "<a href=\"{{url}}\" target=\"_blank\">{{name}}</a>" +
                       "</li>{{/Artist}} </ul>";
                
            var html = this.mustache(tpl, response.query.results);
            new Element('div', {html: html}).inject(this.getElement());

        }.bind(this));
    });
});

app.run();