Вопрос по javascript – Связывание нескольких типов событий в базовых представлениях

26

Мне было интересно, если можно связать несколько типов событий в магистрали в одной строке.

Учтите следующее:

var MyView = Backbone.View.extend({
    id: 'foo',
    events: {
        'click .bar': 'doSomething',
        'touchstart .bar': 'doSomething'
    },
    doSomething: function(e) {
        console.log(e.type);
    }
});

По сути, меня интересует, возможно ли объединить привязку события для «клика»; и «touchstart»; в одну строку - по направлениям:

events: { 'click,touchstart .bar': 'doSomething' }

Мы ценим любые предложения.

У меня уже есть приличный объем кода в большинстве моих просмотров & apos; метод инициализации, поэтому я предпочитаю избегать привязки событий там в порядке предпочтения. stephenmuss
Для тех, кто ищет правильную ссылку Триггер:backbonejs.org/#Events-trigger user823447
ты проверилTrigger раздел здесьdocumentcloud.github.com/backbone/#Events, Но в вашем случае сделайте привязку в Views инициализировать метод. Deeptechtons

Ваш Ответ

3   ответа
18

которые связаны черезdelegateEvents, Этовозможно для магистральных событий, хоть:

book.on("change:title change:author", ...);
Вы можете проверить, какdelegateEVents работает в аннотированном исходном коде. Вы также можете определитьevents свойство view как функция, которая возвращает хеш события
Да не возможно, актуальноdelegateEvents implementation основан только на одном видеkey состав.
Просто из любопытства, есть ли причина, по которой вы не можете просто перечислить их по отдельности в своих событиях: {}? Или вы просто пытаетесь максимально сократить свой код?
Да, я знаю, что могу сделать это с моделями. Но это действительно не представляется возможным в декларации событий в целях позвоночника? Я также предпочитаю не делать привязку к представлению в способе инициализации представления. Мне любопытно посмотреть, что другие скажут, возможно ли это или нет. Но если, как вы говорите, я не попытаюсь сделать какое-то расширение Backbone.View. stephenmuss
1

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

Github совершать здесь

Добавьте его в Backbone напрямую:

delegateEvents: function(events) {
  events || (events = _.result(this, 'events'));
  if (!events) return this;
  this.undelegateEvents();
  for (var key in events) {
    var method = events[key];
    if (!_.isFunction(method)) method = this[method];
    if (!method) continue;
    var match = key.match(delegateEventSplitter);
    this.delegate(match[1], match[2], _.bind(method, this));
  }
  return this;
}

Переопределить метод DelegateEvents:

Backbone.View.prototype.originalDelegateEvents = Backbone.View.prototype.delegateEvents;
Backbone.View.prototype.delegateEvents = function(events) {
    events || (events = _.result(this, 'events'));
    if (!events) return this;
    this.undelegateEvents();
    for (var key in events) {
        var method = events[key], combinedEvents = key.split(',');
        if (!_.isFunction(method)) method = this[method];
        if (!method) continue;

        for(var i = 0, match = null; i < combinedEvents.length; ++i) {
            match = combinedEvents[i].trim().match(/^(\S+)\s*(.*)$/);
            this.delegate(match[1], match[2], _.bind(method, this));
        }
    }
    return this;
};

Теперь мы можем управлять событиями в одну строку:

events: { 
    'click a[data-anchor], wheel, keydown': 'scroll'
}
15

delegateEvents в Backbone.View.

Есть только несколько модифицированных строк, чтобы получить желаемую функциональность.

Вы можете увидеть разницу в моемсовершить на GitHub

ВотdelegateEvents в его измененном состоянии:

delegateEvents: function(events) {
    if (!(events || (events = getValue(this, 'events')))) return;
    this.undelegateEvents();
    for (var key in events) {
        var method = events[key];
        if (!_.isFunction(method)) method = this[events[key]];
        if (!method) throw new Error('Method "' + events[key] + '" does not exist');
        var match = key.match(delegateEventSplitter);
        var eventTypes = match[1].split(','), selector = match[2];
        method = _.bind(method, this);
        var self = this;
        _(eventTypes).each(function(eventName) {
            eventName += '.delegateEvents' + self.cid;
            if (selector === '') {
              self.$el.bind(eventName, method);
            } else {
                self.$el.delegate(selector, eventName, method);
            }
        });
    }
}

Похожие вопросы