Backbone model binder

by niki4810

HTML

<script src="https://raw.github.com/documentcloud/underscore/master/underscore.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/master/backbone.js"></script>
<!--View Template-->
<div id="viewContent"></div>

JavaScript

$(function () {

    var model1 = new Backbone.Model();
    model1.set({
        firstName: '',
        lastName: ''
    });

    var SearchPanel = Backbone.View.extend({
        el: '#viewContent',
        events: {
            "click .mySearchButton": "handleSearchClick",
                "click .myLoadButton": "handleLoadClick",
                "click .myClearButton": "handleClearClick"
        },
        _modelBinder: undefined,

        initialize: function () {
            _.bindAll(this);
            this._modelBinder = new Backbone.ModelBinder();
        },
        close: function () {
            this._modelBinder.unbind();
        },
        render: function () {
            var html = "<div id='searchContainer'>" +
                "<div>First Name :" +
                "<input class='myFirstName' type='text' />" +
                "</div>" +
                "<div>Last Name :" +
                "<input class='myLastName' type='text'/>" +
                "</div>" +
                "<div>" +
                "<hr/>" +
                "<button class='mySearchButton'>Search</button>" +
                "<button class='myLoadButton'>Load</button>" +
                "<button class='myClearButton'>Clear</button>" +
                "</div>" +
                "<hr/>" +
                "<h4>You Searched for</h4>" +
                "<label class='lblFirstName'></label>," +
                "<label class='lblLastName'></label>" +
                "</div>"
            this.$el.html(html);
            var bindings = {
                firstName: '[{selector: "[class~=lblFirstName]"}, {selector: "[class~=myFirstName]"}]',
                lastName: '[{selector: "[class~=lblLastName]"}, {selector: "[class~=myLastName]"}]'

            }
            this._modelBinder.bind(model1, this.el, bindings);
            return this;
        },
        handleSearchClick: function () {
            console.log("searchClick");
        },
        handleLoadClick: function () {
           ...