Question

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

问题是，一旦three.js做了它的事情，我就不能再通过控制器/视图或路由器在视图上捕获点击事件了。

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

Answer 1

参考您关于在Ember View中捕获事件的最后一条评论，这可以通过简单地在该View上定义一个函数/钩子，其中包含您要捕获的事件的名称，如：

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

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

有关在ember中处理事件的更多信息，请参阅ember guides

希望有所帮助

Answer 2

如果您能以某种方式获取id实例的HTML 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 3

排序。对于在使用带有Ember.js的Three.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仍然可以监视它们上的事件。

以编程方式触发EmberView上的单击事件

3 个答案: