我应该如何绑定到 Ember 视图中的窗口函数?

2024-01-03

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

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

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

我有一个简化的 JSFiddlehere http://jsfiddle.net/kGhrx/1/

这是代码:

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)

我知道我晚了几年,但我一直在寻找同一问题的解决方案并发现了这一点:

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

(来源:Ember.js 官方 http://emberjs.com/blog/2014/02/12/ember-1-4-0-and-ember-1-5-0-beta-released.html)

**** 附注 关于这个小技巧的实现 - 我不知道是否可以在控制器方法中使用它并在 init 上触发(如 denis.peplin 评论的那样),我实际上是在路由的“setupController”函数中绑定事件。我不知道这是否是最佳实践,但它在我的应用程序中就像一个魅力。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我应该如何绑定到 Ember 视图中的窗口函数? 的相关文章

  • ember 数据验证的标准模式是什么? (无效状态,变成无效……)

    我已经为此苦苦挣扎了一段时间 让我们看看是否有人可以帮助我 尽管自述文件中没有明确说明 但 ember data 提供了一定程度的验证支持 您可以在代码和文档的某些部分看到 https github com emberjs data blo
  • emberjs 和 Foundation4

    我正在尝试使用 emberjs 和 Foundation 4 现在使用 zepto 框架 但一旦我将 emberjs 添加到我的 application js 中 基础代码就停止工作 包含的顺序有问题吗 require jquery req
  • 将带有参数的视图组件渲染到名为outlet ember.js 中

    我的应用程序模板中有 2 个命名网点 slider area and pre footer 有没有一种方法可以传递带有参数的视图组件 如main slider索引模板中显示的组件是否连接到命名出口 所以我需要通过 main slider s
  • Ember.js:从集合中检索随机元素

    我有这样的路线 App RandomThingRoute Ember Route extend model function return App Thing find random 这需要一趟 things randomAPI端点 我在控
  • arrayWillChange 中“无法调用未定义的‘销毁’方法”

    我有一个非常标准的数组 模板关系设置 但是当我将一个新项目推入数组时 我得到了上面提到的内容Cannot call method destroy of undefined错误在arrayWillChangeEmber源码的方法 for id
  • 根据grunt任务设置Env变量

    我有一个 web 应用程序 emberjs 我需要根据 grunt 任务设置环境变量 所以当我跑步时grunt server它会选择development 并且 url 将被设置为localhost 5000 但当我这样做时grunt bu
  • 标签中的 Ember 车把模板

    ember 特别是应用程序模板 是否可以在 head 标签内进行操作 以便动态更改标题标签 元标签 外部 css 样式表和 favicon 等内容 如果是这样 那么一种干净的方法是什么 为了完成这项工作 我所做的是创建车把助手 例如 如果您
  • 按属性按优先级排序

    我有想要排序的项目 我的项目在模型上计算了属性 包括winning bidding closed and watching 这些属性中的每一个都是 true 或 false 我想对项目进行排序 以便所有获胜项目位于第一 然后是所有投标项目
  • 从模板访问模型

    在玩 ember 时 我发现有时模型存储在控制器的content属性 有时模型也可以直接在控制器上使用 然而 当这种情况发生时 我不明白 让我用一个我在组装 ember MVC 时发现的例子来解释一下 设置 A 开始 我定义了一个自定义Me
  • 防止回车键触发按钮

    我有一个搜索输入框 当用户按下 Enter 时不需要执行任何操作 我正在使用 EmberJS 和 Jquery 以及以下代码 目前 它可以禁止触发弹出窗口 但由于某些原因 在 IE9 中 当按下 Enter 键时 切换按钮将成为焦点 在 C
  • 如何在apache服务器中部署ember-cli项目

    我有以下问题 我使用 ember cli 创建了一个 ember 应用程序 该应用程序通过 url 在 nodejs 上运行良好http localhost 4200 运行命令时ember serve 我想在 apache httpd 服务
  • 将子记录渲染到特定的出口

    我有这个工作示例jsfiddle http jsfiddle net bazzel SM5VM 我显示的列表Posts 当一个Post选择后 我会在帖子模板的出口中显示详细信息 到目前为止没有问题 由于每Post has many Comm
  • Ember:断言失败:EmberObject.create 不再支持定义计算属性

    我使用的是 Ember 2 16 版本 我们升级到了 3 8 版本升级后 我看到此错误 但无法弄清楚错误来自何处 在什么情况下我会收到此错误 我看到其中一篇帖子 Ember JS 中的动态计算属性已弃用 https stackoverflo
  • 如何处理 ember.js 组件中的自定义事件?

    我是 Ember js 的新手 在理解其原理时遇到了一些问题 我知道行动向上 数据向下但在现实生活中 假设我有Fotorama http fotorama io 在 my gallery 组件中初始化 我不知道这是否可以 但我是在didIn
  • Ember.js 输入字段

    是否可以在 Ember js 视图中使用标准 HTML5 输入字段 或者您是否被迫使用 Ember TextField Ember CheckBox Ember TextArea 和 Ember select 等内置字段的有限选择 我似乎无
  • Ember:如何使用 i18n lib 翻译占位符?

    See http jsfiddle net cyclomarc 36VS3 1 http jsfiddle net cyclomarc 36VS3 1 我正在使用 Ember i18n lib 进行翻译 如何在 Ember TextFiel
  • 告诉 ember.js 对其模型的“id”使用不同的密钥

    我陷入了不应该回来的境地idAPI 端点中的字段 我需要告诉 ember 使用slug字段为 而不是id I tried DS RESTAdapter map App Post id key slug 虽然这对于App Post find
  • 在 Ember 中将模型属性插入 Img 元素 URL

    我有一个模型image id财产 我有一个包含图像元素的模型视图 我需要将 id 插入图像元素的src属性来完成图像的 URL 以便我有效地执行此操作 img src 我的第一次尝试使用了 Handlebars 助手 img src 但这也
  • 是否可以使用脚本标签加载车把模板?或者在 Ember.js 中以编程方式定义车把模板

    很简单 我不想在 html 文件中定义所有车把模板 我试过这个 但这没有用 我是否可以不以编程方式定义模板 甚至只是加载车把文件 以便我可以重用 而且我觉得这使事情更易于维护 我尝试用 ajax 加载它们并将它们附加到头部 这工作正常 我可
  • ember js 子视图和 didinsertelement 事件

    我正在写一个Ember View 它将树结构变成菜单 我需要递归 所以我在视图模板中使用的是 view helper 它递归地调用自身来构建嵌套 ul li 结构 我需要的是一个钩子来调用一些 jQuery 插件来将此结构转换为菜单 当我从

随机推荐