Camel Case text convertor

Using BackboneJS and regex

by maxim75

HTML

<!DOCTYPE html>
<html>
    <head>
        <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="backbone-ui.css" rel="stylesheet" type="text/css" />
        <style>
            
        </style>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/jquery-ui.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
        <script src="laconic.js"></script>
    </head>
    <body>
        <textarea type="text" id="input"></textarea>
        <textarea type="text" id="output"></textarea>
    </body>
</html>

CSS

#label
{
    border: solid 1px Red;
}

textarea
{
    width: 300px;
}

JavaScript

window.data = new Backbone.Model({
          input: "",
          output: ""
        });
        
        window.data.on("change input", function() {
            var result = this
                .get("input")
                .replace(/( [a-z])/g, function($1){return $1.toUpperCase().replace(' ','');})
                .replace(/[\.\" \'\(\)]/g, '');
            this.set("output",result);
        });

        window.TextboxView = Backbone.View.extend({
            initialize: function() {
                this.model.on("change " + this.options.property, _.bind(this.render, this));
                $(this.el).keyup(_.bind(this.onKeyup, this));
            },
            
            onKeyup: function() {
                this.model.set(this.options.property, $(this.el).val());
            },
            
            render: function() {
                $(this.el).val(this.model.get(this.options.property));
            }
        });
        

        window.LabelView = Backbone.View.extend({
            options: {
                format: function(el, value) { $(el).text(value); }
            },
            
            initialize: function() {
                this.model.on("change " + this.options.property, _.bind(this.render, this));
            },
            
            render: function() {
                var value = this.model.get(this.options.property);
                
                this.options.format(this.el, value);
            }
        });
        
        var textboxView = new window.TextboxView({ 
            el: $("#input"), 
            model: window.data, 
            property: "input" 
        });
        var textboxView = new window.TextboxView({ 
            el: $("#output"), 
            model: window.data, 
            property: "output" 
        });