ModelBinder contenteditable example

by Nikki Rabbitt

HTML

<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.modelbinder/1.0.5/Backbone.ModelBinder.min.js"></script>
<br>
Model data: <div id="modelData"></div>

<hr><br>
<div id="viewContent"></div>

JavaScript

$().ready(function () {

            model = new Backbone.Model();

            model.set({firstParagraph: 'This is the first paragraph'});

            model.bind('change', function () {
                $('#modelData').html(JSON.stringify(model.toJSON()));
            });

            model.trigger('change'); // just to show the #modelData values initially, not needed for the ModelBinder

            ViewClass = Backbone.View.extend({

                _modelBinder: undefined,

                initialize:function () {
                    this._modelBinder = new Backbone.ModelBinder();
                },

                close: function(){
                    this._modelBinder.unbind();
                },

                render:function () {
                    var html = '\
                      \
                      <div name="firstParagraph" contenteditable="plaintext-only" style="height: 100px; width: 300px; border:solid"></DIV> \
                      ';

                    this.$el.html(html);

                    this._modelBinder.bind(model, this.el, {firstParagraph: {selector: '[name=firstParagraph]'}});

                    return this;
                }
            });

            view = new ViewClass();

            $('#viewContent').append(view.render().$el);
        });