10

我有一个 mixin，它会在页面调整大小时自动重新计算并设置 div 的高度。

它可以工作，但对我来说绑定到 jQuery 事件并在每次调用时手动触发 Ember 事件似乎很愚蠢。

有没有办法直接在 Ember 中绑定到窗口事件？

我在这里有一个简化的 JSFiddle

这是代码：

App.windowWrapper = Ember.Object.create(Ember.Evented,
  resizeTimer: null
  init: ->
    @_super()
    object = this
    $(window).on 'resize', ->
      window.clearTimeout(object.resizeTimer)
      object.resizeTimer = setTimeout( App.windowWrapper.resize, 100)
      true

  resize: ->
    App.windowWrapper.fire('resize')
)

以及调用它的mixin。

App.Scrollable = Ember.Mixin.create
  classNames: "scrollable"
  init: ->
    Ember.assert("Scrollable must be mixed in to a View", this instanceof Ember.View)
    @_super()

  didInsertElement: ->
    @_super()
    @calculateHeight()
    App.windowWrapper.on('resize', this, 'calculateHeight')

  willDestroyElement: ->
    App.windowWrapper.off('resize', this, 'calculateHeight')
    @_super()

  calculateHeight: ->
    offset       = @$().offset().top
    windowHeight = $(window).height()
    @$().css('height', windowHeight - offset)
4

5 回答 5

14

我知道我迟到了几年，但我一直在寻找解决同一问题的方法并发现了这一点：

jQuery(window).on('resize', Ember.run.bind(this, this.handleResize));

（来源：Ember.js 官方）

**** PS关于这个小技巧的实现 - 我不知道是否可以在控制器方法中使用它并在初始化时触发（正如denis.peplin评论的那样），我实际上是在路由中绑定事件“设置控制器”功能。我不知道这是否是最佳实践，但它在我的应用程序中就像一个魅力。

于 2014-10-19T09:46:27.763 回答
8

使用 jQuery 为类似的事情注册自己的事件处理程序没有任何问题。

Ember 目前没有任何窗口事件处理。

我还建议尝试提出一个不依赖全局变量的解决方案。

于 2012-06-02T23:22:27.827 回答
3

Itay Hamashmid以及答案的示例代码：

App.ApplicationController = Ember.Controller.extend({
  handleResize: function() {
    console.log('resized');
  },
  bindResizeEvent: function() {
    jQuery(window).on('resize', Ember.run.bind(this, this.handleResize));
  }.on('init')
});
于 2014-11-07T06:45:39.103 回答
0

我认为 Ember.js 不可能 - 它提供内置 DOM 事件处理的唯一地方是 Ember.View （单击等），也许在其他与视图相关的类中。

我们还对您的解决方案使用了类似的方法来处理此类特殊情况！

于 2012-06-02T23:16:07.607 回答
0

对于那些通过最新答案搜索或只是摆脱 jquery 的人......

就我而言，我只想知道窗口是否调整为计算元素的宽度。

import Component from '@ember/component';

export default Component.extend({
  size: window.innerWidth,

  init() {
    this._super(...arguments);

    window.addEventListener('resize', ()=> this.set('size', window.innerWidth));
  }
});

是啊，我知道这种匿名函数是没有办法解绑的，但是我搜索了，也没有找到好的答案……

我想重构它以使用 jquery，但在有限的范围内，例如：

import Component from '@ember/component';
import $ from 'jquery';

export default Component.extend({
  size: window.innerWidth,

  init() {
    this._super(...arguments);

    $(document.querySelector('#something'))
              .on('resize', (e)=> this.set('size', e.target.innerWidth));
  }
});

这将监听器将一直存在，直到该组件存在！

于 2019-08-16T16:35:20.490 回答