Backbone test

by gbos

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<div id="test">
    <button>click</button>
    <span class="test"></span>
</div>

CSS

.red {
    border: 1px solid red;
    
}

JavaScript

var proxiedSync = Backbone.sync;
  Backbone.sync = function(method, model, options) {
    options || (options = {});
    if (!options.crossDomain) {
      options.crossDomain = true;
    }
    if (!options.xhrFields) {
      options.xhrFields = {withCredentials:true};
    }
    return proxiedSync(method, model, options);
  };

var Provider = Backbone.Model.extend({ 
    urlRoot: 'https://breakdown.ebts.eu/ebts3_acc/api/providers' ,
    parse: function (result) {
        return {
            id: result.Id,
            Name: result.Name,
            City: result.City
        };
    }
});

var ProviderView = Backbone.View.extend({
    model: new Provider({id: 3}),
    initialize: function () {
        this.model.on('change', this.render, this);
        this.model.fetch();
    },
    events: {
        'change input': 'updateModel'
    },
    updateModel: function () {
        var input = arguments[0].target;
        this.model.set(input.name, input.value);
        this.model.save();
    },
    template: _.template('<input name="Name" value="<%=Name%>"> -- <span><%=City%></span>'),
    render: function () {
        this.$el.html(this.template(this.model.attributes));
    }
});

var providerView = new ProviderView();
$('body').append(providerView.$el);

var A = Backbone.Model.extend({});

var V = Backbone.View.extend({
    model: new A(),
    initialize: function () {
        this.model.set('val', 1);
        this.render();    
        this.model.on('change:val', this.render, this);
    },
    events: {
        'click button': 'incr'    
    },
    incr: function () {
        this.model.set('val', this.model.get('val') + 1);
    },
    template: _.template('<span>hello <%=val%></span><button>incr</button>'),
    tagName: 'span',
    className: 'red',
    render: function () {
        this.$el.html(this.template(this.model.attributes));    
    }
});

var v = new V();
$('body').append(v.$el);

var V2 = Backbone.View.extend({
    el: document.getElementById('test'),
   ...