ember.js - 以编程方式触发 EmberView 上的点击事件

Question

我有一个 Ember 应用程序，我正在使用 three.js 及其 CSS 渲染器来显示 3D 视图数组。

问题是，一旦 three.js 完成了它的工作，我什至无法通过控制器/视图或路由器在视图上捕获点击事件。

有谁知道如何以编程方式触发 Ember 视图上的点击事件？我确实可以访问“data-ember-action”值，并希望我可以使用它来查找绑定事件并让它运行。

Answer 1

如果您能以某种方式获取实例的 HTMLid属性，View那么您可以使用

Ember.View.views["#the-view-id"].click()

获取视图 ID

• 我们可以在类定义 elementId期间手动设置为View

  Ember.View.extend({elementId: 'the-view-id'})
  

• 或者如果 Id 是由 ember 以编程方式生成的，那么我们可以使用jQuery类名来获取元素

  element.attr("id")

希望这可以帮助...

Answer 2

参考您对在 Ember 视图中捕获事件的最后评论，这可以通过简单地使用您要捕获的事件的名称在该视图上定义一个函数/挂钩来工作，例如：

App.MyView = Ember.View.extend({
  click: function(event) {
    alert("clicked!");
  },

  doubleClick: function(event) {
    alert("double clicked!");
  }
});

更多关于在 ember 中处理事件的信息可以在ember 指南中找到

希望能帮助到你

Answer 3

排序。对于在将 Three.js 与 Ember.js 一起使用时遇到事件传播/Ember 绑定问题的任何其他人。我遇到的问题是 Three.js 正在创建一个场景并将其附加到现有的 DOM 元素：

renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById( 'container' ).appendChild( renderer.domElement );

在创建我的 Ember.Application 时，我给出了一个根元素：

window.App = Ember.Application.create({
  VERSION: '0.1.0',
  LOG_TRANSITIONS: true,   
  rootElement: '#column',
  ready: function() {}
});

由于 Three.js 将 ember 视图移动到容器 div 中，因此它们不再在 #column div 中找到，它正在通过 Ember.eventDispatcher 查找事件。

为了解决这个问题，我只是注释掉了 rootElement 声明。由于我有一个命名模板并在我正在渲染的页面中接收 {{outlet}}，因此 Ember 可以将我的视图放入页面中而无需此。当 Three.js 然后将视图移动到#container div 中时，Ember 仍然可以监视它们上的事件。