Interaktive Backbone.js-Ansicht

Eine Backbone.js-Ansicht mit typischen CRUD-Operationen

HTML

<script src="https://rawgithub.com/jashkenas/underscore/1.5.2/underscore-min.js"></script>
<script src="https://rawgithub.com/jashkenas/backbone/1.0.0/backbone-min.js"></script>
<div id="demo">Demo</div>

CSS

.edit,
.delete {
 cursor: pointer;
}

JavaScript

var MasterView = Backbone.View.extend({
    tagName: "table",
    className: "masterview",
    addOne: function(element) {
        var itemview = new ItemView({ data: element });
        this.$el.append(itemview.render().el);
    }
});
 
var masterview = new MasterView();
jQuery('body').append(masterview.$el).append('<a href="javascript:bbadd();">+</a>');
 
var ItemView = Backbone.View.extend({
    tagName: "tr",
    className: "backboneitem",
    template: _.template('<td><span class="edit">✏</span></td><td><span class="show"><%= title %></span></td><td><span class="delete">✗</span></td>'),
     
    events: {
       "click .delete": "clickOnDelete",
       "click .edit"  : "clickOnEdit"
    },
     
    initialize: function(options) {
        if (options.data) {
            this.data = options.data;
            this.listenTo(this.data, "remove", this.remove);
            this.listenTo(this.data, "change:title", this.render);
        }
    },
     
    render: function() {
        this.$el.html(this.template(this.data.toJSON()));
        return this;
    },
     
    clickOnDelete: function() {
      if (confirm(this.data.get("title") + " löschen?")) {
         this.data.collection.remove(this.data);
      }
    },
     
    clickOnEdit: function() {
      var newtitle = prompt("Neuer Titel", this.data.get("title"));
      if (newtitle != null && newtitle != "") {
        this.data.set("title", newtitle);
      }
    }
});
 
var Items = Backbone.Collection.extend();
var items = new Items();
 
masterview.listenTo(items, "add", masterview.addOne);
 
items.add({ id: 17, title: 'Apfel' });
items.add({ id: 23, title: 'Birne' });
items.add({ id: 42, title: 'Orange' });
 
var bbadd = function() {
    var title = prompt("Neuer Titel?");
    if (title != "" && title != null) {
        items.add({title: title});
    }
}