Backbone Stickit Simple Example

by kazu69

HTML

<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
<script src="https://rawgit.com/NYTimes/backbone.stickit/master/backbone.stickit.js"></script>
<div id="field">
</div>
    <div id="result"></div>

CSS

body {
    font-family: arial;
}

JavaScript

// Define model
var BaseModel = Backbone.Model.extend({
    defaults: {
        'title': null
    }
});
// Define views
var FieldView = Backbone.View.extend({
    el: '#field',
    bindings: {
      '#title': 'title'
    },
    template: _.template('<input id="title" type="text" placeholder="Please input anything" autofocus>'),
 
    render: function() {
      this.$el.html(this.template);
      this.stickit();
   }
});

var ResultView = Backbone.View.extend({
    el: '#result',
    initialize: function() {
       this.listenTo(this.model, 'change', this.render);
    },
    template: _.template('<p><%- value %></p>'),

    render: function() {
        var json = JSON.stringify(this.model.toJSON());
        this.$el.html(this.template({value: json}));
    }
});
baseModel = new BaseModel();
fieldView = new FieldView({ model: baseModel });
resultView = new ResultView({ model: baseModel });
fieldView.render();