Блог

У меня есть небольшое приложение, в котором пользователь может размещать divs на сцене.

Эти divs должны быть перетаскиваемыми (и изменяемыми по размеру) (через jQuery UI), далее должен быть запущен выбор событий, когда пользователь взаимодействует с div (через hammer.js ).

Текущая реализация:

 App.DdView = Ember.View.extend({
    // ...
    didInsertElement: function (arg) {
        // some logic
        var $this = this.$();
        $this
            .draggable(/*...*/)
            .resizable(/*...*/);

        //delegate
        $(document).hammer().on("tap hold swipe", $this, function (e) {
            console.log(e.type)
        });
    }
    // ...
});
  

Есть две проблемы:

1. если я привяжу события к элементу $this, divs больше не будут перетаскиваться (вероятно, событие mousedown по умолчанию запрещено). Если я делегирую событие (как показано в коде), divs можно перетаскивать, но события будут запускаться для всего документа.

2. если размещено больше divs, события запускаются многократно.

Итак, я подумал, что самое разумное решение — научить ember, что нужно обрабатывать больше событий, чем

 'click', 'doubleClick', 'contextMenu' ...
  

Я бы хотел реализовать событие (обработчики), как показано ниже:

 App.DdView = Ember.View.extend({
    tap: function(){},
    hold: function(){},
    pinch: function(){},
    // ...
});
  

Если есть гораздо более простые способы реализовать это, не стесняйтесь публиковать их.
Спасибо

Обновить:

изменение селектора с «$ this» на «‘#’ $this [0].id» решает проблемы, но, похоже, это очень грязное решение.

 $(document).hammer().on("tap hold swipe", '#' $this[0].id, function (e) { ... });
  

Итак, все еще остается вопрос, можно ли обучить ember новым событиям.

Это не совсем то, что я хотел, потому что я должен делать это «обходное решение» в каждом представлении. Но пока это решение работает нормально:

 var hammerEvents = ["touch", "release", "gesture", /* ... */];


didInsertElement: function (arg) {
    /* ... */
    var emthis = this,
        $this = this.$(),
        touchEvents = hammerEvents.join(" ");
    $(document).hammer().on(touchEvents, '#'   $this[0].id , function (e) {
        if (typeof emthis.get(e.type) == "function") {
            emthis.get(e.type).call(emthis);
        }
    });
}
  

@lukkysam, ознакомьтесь с моим проектом ember-hammer для интеграции Hammer.js с Ember.js : https://github.com/chriswessels/ember-hammer

Пример использования:

 App.SomeView = Ember.View.extend({
  hammerOptions: {
    swipe_velocity: 0.5
  },
  gestures: {
    swipeLeft: function (event) {
      // do something like send an event down the controller/route chain
      return false; // return `false` to stop bubbling
    }
  }
});