Synapse Demo

https://github.com/bruth/synapse

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<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.5.1/docs/js/'
}, [
    'jquery',
    'synapse',
    'synapse/object',
    'synapse/jquery',
    'synapse/backbone-model'], function ($, Synapse, ObjectHook, jQueryHook, BackboneModelHook) {

    Synapse.hooks = [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');
    });
});