Основа этой путаницы - PullRequest
Новая
       13

Основа этой путаницы

5 голосов
/ 27 марта 2012

У меня есть следующий код: 

var GoalPanelView = Backbone.View.extend({

    // Bind to the goal panel DOM element
    el: $("#sidebar-goals"),    

    // Initialize the collection
    initialize: function() {
        this.collection = Goals;
        this.collection.bind('add', this.appendItem);
    },

    // Create a new goal when a user presses enter in the enter goal input
    createOnEnter: function(e) {
        if (e.keyCode != 13) return;
        this.addItem();
        //Goals.create(this.newAttributes());           
    },

    // Add the goal item to the goal list
    addItem: function() {
        var goal = new Goal();
        goal.set(this.newAttributes());
        var goalsElem = this.el;
        this.collection.add(goal);
        $(this.el).children("#enter-goal").val('');
    },

    // Append DOM element to the parent el
    appendItem: function(item) {
        var goalView = new GoalView({
            model: item,
        });
        $(this.elem).append(goalView.render().el);
    }

});

Моя проблема связана с функцией appendItem. Когда я использую this внутри функции appendItem, я думаю, что он думает, что this относится к this.collection, а не GoalPanelView. Как мне заставить this сослаться на GoalPanelView вместо collection? Я попытался передать другую переменную в функцию appendItem, которая содержала содержимое this.elem, но, похоже, она не работала.

Единственное, что сработало, - это когда я переместил функцию appendItem в collection и изменил инициализацию для привязки на this.collection.bind('add', appendItem);, но я не хочу помещать view в логику collection.

Ответы [ 3 ]

6 голосов
/ 27 марта 2012

Вы можете добавить область при привязке обработчика событий, например: 

this.collection.bind('add', this.appendItem, this);

Область устанавливает значение this внутри обработчика. В вашем случае текущий объект.

Редактировать: Javascript Garden имеет отличное объяснение, почему this.appendItem на самом деле не несет в себе область действия самой функции, это просто указатель на функцию, а не указатель на метод. Одна из причуд Javascript ..

Изменить 2 Ссылка на магистраль - События / вкл.

2 голосов
/ 14 июля 2012

Просто для обновления (начиная с Backbone 0.9.2), правильный способ сделать это: 

initialize: function() {
    this.collection.on("add", this.appendItem, this);
    ...
}


В зависимости от вашего варианта использования, вы также можете рассмотреть: 

initialize: function() {
    this.listenTo(this.collection, "add", this.appendItem);
    ...
}
0 голосов
/ 18 мая 2012

Вы также можете использовать функцию подчеркивания _.bindAll в своем методе initialize: 

initialize: function() {
   _.bindAll(this);
   this.collection = Goals;
   this.collection.bind('add', this.appendItem);
}

Теперь любой вызов любого метода в GoalPanelView (например, appendItem) будет ограничен так, что ссылки на this ссылаются на экземпляр GoalPanelView.

Вы также можете передать список имен методов в виде строк, если вы не хотите охватывать все методы GoalPanelView

Смотрите здесь: http://underscorejs.org/#bindAll

...