Вызов метода в коллекции, когда вызывается метод View - PullRequest
Новая
       28

Вызов метода в коллекции, когда вызывается метод View

1 голос
/ 29 января 2012

У меня есть представление и коллекция, такие как: 

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

Я хочу, чтобы метод Collection toBasket () вызывался после вызова метода View toBasket ().Для этого я делаю в Коллекции следующее: 

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

Итак, если это сработало, я должен получить два сообщения в консоли javascript:

  1. view
  2. collection

(может быть, в другом порядке)

Но я вижу только сообщение "view" в консоли.Что я делаю не так?

TIA!

1 Ответ

3 голосов
/ 29 января 2012

Ты почти у цели.В представлении вашей коллекции вы пытаетесь прослушать событие DmnView toBasket, но его настройка немного некорректна.Чтобы прослушивать события, вам нужно привязать к конкретному экземпляру, который вы хотите слушать, а не к классу.Таким образом, вы захотите переместить связывание с initialize на addOne, например так: 

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

Теперь, когда представление вашей коллекции прослушивает событие toBasket, вам нужно запуститьсобытие в вашем DmnView представлении.

В представлениях Backbone никакие события не запускаются автоматически, поэтому вам нужно вручную запустить его самостоятельно, например: 

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

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

Теперь вам нужносмотрите оба сообщения в своей консоли.

...