BackboneKIT - Declarative Events Example

by secretgspot

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="https://raw.github.com/movableapp/BackboneKit/master/kit.inc.js"></script>
<!--
TwitterBootstrap Skeleton
-->
<div class="container">
    
    <header class="page-header">
        <h2>BackboneKIT - <small>Declarative Events Example</small></h2>
        <a href="https://github.com/movableapp/BackboneKit">fork on GitHub</a>
    </header>
    
    <h3>Example #1</h3>
    <p>Two buttons in a <i>PanelView</i>.<br>Each button handles a "click" event and alert a message.<br>Then trigger a "click" event to the parent View (Panel) who listen for the same event.</p>
    <section id="app"></section>
    
    <h3 style="margin-top:20px">Example #2</h3>
    <p>A <i>PersonView</i> display data from a model using a template.<br>When model's data change <code>render()</code> needs to be executed!</p>
    <section id="app1"></section>
    
    <section style="margin-top:20px;padding-top:20px;border-top:1px solid #aaa">
        <h3>Fork on GitHub</h3>
        <p>
            <a href="https://github.com/movableapp/BackboneKit">BackboneKIT is available on GitHub to download and fork! It's free!</a>
        </p>
        
        <h3>Follow Me!</h3>
        <p>
            Don't forget to <b>follow me on Twitter</b>: <a href="https://twitter.com/movableapp" target="_blank">@MovableAPP</a>
        </p>
        <p>
<a href="https://twitter.com/movableapp" class="twitter-follow-button" data-show-count="false">Follow @movableapp</a>
<script>!function(d,s,id){var...

JavaScript

/**
 * Example #1
 */
var PanelView = Backbone.View.extend({
    
    viewEvents: {
        'clickButton' : 'onClickButton'
    },
    
    add: function( subView ) {
        
        subView.setParent( this );
        
        subView.appendTo( this.$el );
        
    },
    
    onClickButton: function( button ) {
        
        alert( "PANEL_VIEW_EVENT: click " + button.options.name + "\r\n\r\nThis event has been triggered on the view object." );
        
    },
    
});

var Button = Backbone.View.extend({
    
    tagName: 'button',
    
    events: {
        'click' : 'onClick'
    },
    
    render: function() {
        
        this.$el.attr( 'name', this.options.name );
        this.$el.html( this.options.label );
        
        return this.el;
        
    },
    
    onClick: function() {
        
        alert( "BUTTON_DOM_EVENT: click " + this.options.name + "\r\n\r\nNow trigger a CLICK event to the parent View." );
        
        this.parent.trigger( 'clickButton', this );
        
    }
    
});

// Instance objects to run example
window.p = new PanelView().renderTo('#app');
p.add( new Button({ name:'bt1', label:'Button1' }) );
p.add( new Button({ name:'bt2', label:'Button2' }) );





/**
 * Example #2
 */

var PersonView = Backbone.View.extend({
    
    attributes: {
        style: 'background:#ddd;text-shadow:0 1px 0 #fff;padding:10px;border:1px solid #666;border-radius:4px'
    },
    
    template: _.template('<b>Name:</b> <%= name %><br><b>Surname:</b> <%= surname %>'),
    
    // Declarative events on a model!
    modelEvents: {
        'change' : 'render'
    },
    
    render: function() {
        
        this.$el.html( this.template( this.model.toJSON() ) );
        
        return this.el;
        
    }
    
});

// Instance objects to run example
window.app1 = new PanelView().renderTo('#app1');

// Just set up some models to hold data
window.p1 = new Backbone.Model({ name:'Ian', surname:'Solo' });

// Add PersonView...