Question

I have a view and collection like this:

window.DmnView = Backbone.View.extend({
    template: _.template($("#tmpl_dmnListItem").html()),
    events: {
        "click .getWhois": "showWhois",
        "click .getDomain": "toBasket"
    },
    initialize: function() {
        this.model.bind('change', this.render, this);
        this.model.bind('destroy', this.remove, this);
    },
    render: function() {
        return $(this.el)
                .attr("class", this.model.get("free") ? "dmnItem green" : this.model.get("checked") ? "dmnItem red" : "dmnItem red loader")
                .html(this.template(this.model.toJSON()));
    },
    remove: function() {
        $(this.el).remove();
    },
    showWhois: function() {
        showBoxes(this.model.get("info"));
        return false;
    },
    toBasket: function() {
        this.model.toBasket();
        console.log("view");
    }
});

window.DmnListApp = Backbone.View.extend({
    el: $("#regWrap"),
    events: {
        "keypress #dmnName": "checkAll"
    },
    initialize: function() {
        this.input = this.$("#dmnName");
        this.list = this.$("#dmnList");
        this.basket = this.$("#dmnBasket");
        dmnList.bind('add', this.addOne, this);
        dmnList.bind('all', this.render, this);
        DmnView.bind('toBasket', this.toBasket, this);
    },
    render: function() {

    },
    addOne: function(dmnItem) {
        var view = new DmnView({model : dmnItem});
        this.list.append(view.render());
    },
    checkOne: function(name, zone, price, days) {
        dmnList.create({name: name, zone: zone, price: price, days: days});
    },
    checkAll: function(e) {
        var name = this.input.val();
        if (!name || e.keyCode != 13) return;
        if (name == "")
            name = "yandex";
        dmnList.destroyAll();
        var zoneList = dmnList.domainsInfo.Name;
        var costList = dmnList.domainsInfo.CostOrder;
        var daysList = dmnList.domainsInfo.DaysToProlong;
        var parent = this;
        $.each(zoneList, function(key, zone) {
            parent.checkOne(name, zone, costList[key], daysList[key]);
        });
        this.input.val("");
    },
    toBasket: function(){
        console.log("collection");
    }
});

I want Collection’s method toBasket() to be called after View’s method toBasket() was called. For this purpose I do the following in Collection:

DmnView.bind('toBasket', this.toBasket, this);

So, if this worked, I should receive two messages in my javascript console:

1. view
2. collection

(Maybe in other order)

But I only see “view” message in console. What I do wrong?

TIA!

Answer 1

You’re almost there. In your collection view, you’re attempting to listen to the DmnView event toBasket, but how you have it setup is a little incorrect. To listen to events, you have to bind to a specific instance you want to listen to, not a class. So you’ll want to move the bind from initialize to addOne, like this:

window.DmnListApp = Backbone.View.extend({
    // ...
    initialize: function() {
        this.input = this.$("#dmnName");
        this.list = this.$("#dmnList");
        this.basket = this.$("#dmnBasket");
        dmnList.bind('add', this.addOne, this);
        dmnList.bind('all', this.render, this);
        // Remove the DmnView bind here
    },
    addOne: function(dmnItem) {
        var view = new DmnView({model : dmnItem});
        // Bind to the DmnView instance here
        view.bind('toBasket', this.toBasket, this);
        this.list.append(view.render());
    },
    // ...
});

Now that your collection view is listening for the event toBasket, you need to actually fire the event in your DmnView view.

In Backbone views, no events are automatically fired, so you’ll need to manually trigger it yourself, like this:

window.DmnView = Backbone.View.extend({
    // ...
    toBasket: function() {
        this.model.toBasket();
        console.log("view");

        // Trigger the event
        this.trigger('toBasket');
    }
});

You should now see both messages in your console.