Backbone.js - Events

COMMAND AND CONTROL (and conquer)

by Steven Senkus

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<ul id="container"></ul>

JavaScript

var Data = Backbone.Model.extend({
    defaults: {
        name: 'default name',
        description: 'this is the default description'
    }
});

var ResultView = Backbone.View.extend({
    template: "<li><a href='#'><%- data.get('name') %></a><p><%- data.get('description') %></p></li>",
    events: {
        'click a': 'handleClick'
    },
    handleClick: function(e) {
        e.preventDefault();
        console.log('handleClick')
        console.log(this.handler)
        this.handler.trigger('linkClick', 'sdfsdf', this.model)
    },
    initialize: function (options) {
        var self = this;
        this.handler = this.options.handler;
        console.log(this)

        $.when($('#container').append(_.template(this.template,{ data: this.model}))).then(function () {
            self.render()
        });
    },
    render: function () {
        this.setElement('li')
    }
});
var ActionView = Backbone.View.extend({});

var app = {};
app.evAgg = _.extend({}, Backbone.Events);
app.model = new Data({
    name: 'Steven Senkus',
    description: 'Javascript Web Developer in Portland, OR'
});
app.resultView = new ResultView({
    model: app.model,
    handler: app.evAgg
});
app.actionView = new ActionView({
    model: app.model,
    handler: app.evAgg
})

app.evAgg.on("linkClick", function(e,a){
  console.log("event passed: ",e,a.get('description'));
});