在 Ember 个应用中订阅 DOM 个事件

Question

我有一个 Ember 基于 CLI 的博客。我目前在应用程序控制器中使用此功能单击它们后调整所有 <img> 内部帖子的大小。

我依赖 on('init') 和 Ember.run.later，这感觉很脏。

如何改进下面的订阅码？

import Ember from 'ember';

export default Ember.ArrayController.extend({
  imageScaling: function() {
    Ember.run.later((function() { 
      //Subscribe to the actual event
      Ember.$(".post-content img").on("click", function(){
        // RESIZE HERE
      })
    }), 3000)
  }.on('init')
});

Answer 1

如果您要将所有图像插入 Ember 模板中，您始终可以使用 action 助手：

<img {{action 'scaleImages' on='click'}} src='' />

我知道情况可能并非如此。我过去处理 DOM 交互的方式是覆盖应用程序视图，然后在那里设置和拆除我的事件处理程序。您还可以通过修改 jQuery 事件侦听器来避免 Ember.run.later 调用。以下是我的做法：

// app/views/application.js
export default Ember.View.extend({
    setupImageScaling: function() {
        $('body').on('click.image-scaling', 'img', function() {
            // RESIZE HERE
        });
    }.on('didInsertElement'),

    teardownImageScaling: function() {
        $('body').off('click.image-sacling');
    }.on('willDestroyElement')
});

以上是我认为的'most Ember'处理这种情况的方法

在 Ember 个应用中订阅 DOM 个事件

Subscribe to DOM events within Ember app

ember.js

ember-cli