Synapse Demo

https://github.com/bruth/synapse

by ecmanaut

HTML

<script src="https://raw.github.com/documentcloud/underscore/master/underscore-min.js"></script>
<script src="https://raw.github.com/jrburke/requirejs/master/require.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<h3>Console</h3>
<pre id="console"></pre>

<h3>Contact Form</h3>

<table>
    <tr>
        <td>First Name</td>
        <td><input type="text" name="first" value="John"></td>
    </tr>
    <tr>
        <td>Last Name</td>
        <td><input type="text" name="last" value="Doe"></td>
    </tr>
    <tr>
        <td>Email</td>
        <td><input type="email" name="email" value="[email protected]"></td>
    </tr>
    <tr>
        <td>Address</td>
        <td><input type="text" name="address" value="123 Apple Drive"></td>
    </tr>       
    <tr>
        <td>City</td>
        <td><input type="text" name="city" value="Cupertino"></td>
    </tr>
    <tr>
        <td>State</td>
        <td><input type="text" name="state" value="CA"></td>
    </tr>
    <tr>
        <td>Zipcode</td>
        <td><input type="text" name="zipcode" value="10000"></td>
    </tr>
     <tr>
        <td>Phone #</td>
        <td><input type="text" name="phone" value="555-555-5555"></td>
    </tr>

</table>

CSS

body {
    padding: 10px;
}

#console {
    border-radius: 3px;
    padding: 5px;
    box-shadow: 0 1px 2px #ccc;
    height: 70px;
    background-color: #eee;
    border: 1px solid #aaa;
    overflow: hidden;
}

JavaScript

// Note, underscore is included as a hard resource since Backbone
// does not yet support AMD

require({
    baseUrl: 'https://raw.github.com/bruth/synapse/0.3.2/docs/js/'
}, [
    'jquery',
    'synapse',
    'synapse/hooks/object',
    'synapse/hooks/jquery',
    'synapse/hooks/backbone-model'
], function($, Synapse, ObjectHook, jQueryHook, BackboneModelHook) {
    
    Synapse.addHooks(jQueryHook, BackboneModelHook, ObjectHook);
    
    var template = _.template('<%= first %> <%= last %> <<%= email %>>\n<%= address %>\n<%= city %>, <%= state %> <%= zipcode %>\n<%= phone %>');
    
    var Contact = Backbone.Model.extend({
        fullContact: function() {
            return template(this.toJSON());
        }
    });
    
    $(function() {
        var data = Synapse(new Contact()),
            firstName = Synapse('[name=first]'),
            lastName = Synapse('[name=last]'),
            email = Synapse('[name=email]'),
            phone = Synapse('[name=phone]'),
            address = Synapse('[name=address]'),
            state = Synapse('[name=state]'),
            city = Synapse('[name=city]'),
            zipcode = Synapse('[name=zipcode]');

        data.observe(firstName);
        data.observe(lastName);
        data.observe(email);
        data.observe(phone);
        data.observe(address);
        data.observe(state);
        data.observe(city);
        data.observe(zipcode);

        var output = $('#console');
        data.bind('change', function() {
            output.text(this.fullContact());
        });
        
        data.trigger('change');
    });
});