[英]How do I add a specific element to the DOM in Ember.js?
For styling purposes, I'd like to create a div that acts as an overlay when a different div is being hovered on. 出于样式目的,我想创建一个div,当另一个div悬停在其上时,该div用作覆盖。
I planned on using a custom event to capture MouseIn
and MouseOut
on one element. 我计划使用自定义事件在一个元素上捕获MouseIn
和MouseOut
。
And then create the div before every other section to act as an overlay, showing them as out -of-focus. 然后在每个其他部分之前创建div以用作覆盖,将它们显示为离焦。
Essentially, in my template, I have 本质上,在我的模板中
{{#each answers}}
{{render "simpleSearchAnswer" this}}
{{/each}}
And that sub-view template thingie is: 那个子视图模板thingie是:
<li class="questioncontainer">
<div {{action "select" this}} class="questiontile">
<div class="row questiontitle">
<p><span>{{title}}</span>
<i class="icon-info-circled"></i></p>
</div>
<div class="row questiondescription">
<p><span>{{description}}</span>
</p>
</div>
</div>
</li>
I'd like to add a new div at the top to act as the overlay, like 我想在顶部添加一个新的div作为叠加层,例如
<li class="questioncontainer">
<!-- NEW STUFF BELOW-->
<div class="overlay"></div>
<!-- NEW STUFF ABOVE -->
<div {{action "select" this}} class="questiontile">
....
But after rendering, not before, while the user is working with the application. 但是在渲染之后,而不是在用户正在使用应用程序之前。
I guess, essentially what I'm asking is, is it possible to add a div using Ember.js dynamically? 我想,基本上我要问的是,是否可以使用Ember.js动态添加div? After rendering? 渲染后?
You can define a custom view for "simpleSearchAnswer", define the methods MouseEnter and MouseLeave and then just use JQuery to accomplish what you need to happen. 您可以为“ simpleSearchAnswer”定义一个自定义视图,定义方法MouseEnter和MouseLeave,然后仅使用JQuery完成所需的操作。
Something like: 就像是:
App.SimpleSearchAnswerView = Em.View.extend({
mouseEnter: function (){
//jquery to add your div
}),
mouseLeave: function (){
//jquery to remove your div
})
});
You can access the Jquery object of your view using this.$()
您可以使用this.$()
访问视图的Jquery对象this.$()
http://emberjs.com/api/classes/Ember.View.html has a list of all the events you can use under "Event Names". http://emberjs.com/api/classes/Ember.View.html在“事件名称”下提供了您可以使用的所有事件的列表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.