Backbone.js 当查看时调用集合中的方法'；调用的方法

我有这样一个视图和集合：

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");
    }
});

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());
    },
    // ...
});

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

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

我希望在调用视图的方法toBasket（）后调用集合的方法toBasket（）。为此，我在集合中执行以下操作：

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

因此，如果这起作用，我应该在javascript控制台中收到两条消息：

看法

收藏

（可能是其他顺序）

但我只在控制台中看到“查看”消息。我做错了什么

---

蒂亚

你就快到了。在“收藏”视图中，您正在尝试收听

DmnView

事件

toBasket

，但设置方式有点不正确。要侦听事件，必须绑定到要侦听的特定实例，而不是类。因此，您需要将绑定从

initialize

移动到

addOne

，如下所示：

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");
    }
});

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());
    },
    // ...
});

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

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

现在集合视图正在侦听事件

toBasket

，您需要在

DmnView

视图中实际触发事件

在主干视图中，不会自动触发任何事件，因此您需要自己手动触发，如下所示：

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");
    }
});

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());
    },
    // ...
});

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

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

---

您现在应该可以在控制台中看到这两条消息。

Hm，我看到一些奇怪的东西。如果我有问题中的代码，并添加手动触发“toBasket”事件。这没有效果。我认为问题在于我为DmnView绑定了事件，但在集合中我创建了很多视图（var view=new DmnView（…）。因此，如果我只是像这样在initialize部分的DmnView（view）中添加绑定，那么bind（'toBasket'，dmnListApp.toBasket，dmnListApp）-比预期的效果要好。你能解释一下为什么它在以前的版本中不起作用吗？哦，你是对的。您的

DmnListApp

的

initialize

函数中有一个小错误<代码>DmnView.bind（'toBasket'，this.toBasket，this）不正确。您需要绑定到

DmnView

的特定实例，而不是视图类本身。在

addOne

中，您应该拥有

view.bind（'toBasket'，this.toBasket，this）

。我将更新上面的答案。您的第二条评论之所以有效，是因为您实际上将模型绑定到它自己的事件，这有点不必要，因为模型应该已经知道它正在触发自己的事件。在这种特定情况下，如果直接调用

dmnListApp.toBasket（）

（假设

dmnListApp

是一个全局的），会更容易一些，尽管我想这不是最干净的方法。所以，“更好”的方法是直接调用全局dmnListApp.toBasket（），对吗？