ビューの mouseEnter と mouseLeave 、具体的<li>
には子を含む要素のみをトリガーしようとしています。以下のコードは と その子にイベントを追加しているように見えますが<li>
、これは通常 を返さず<li>
、通常は<p>
またはを返し<img>
ます。
<li>
ビューによって作成されたものだけをターゲットにするにはどうすればよいですか?
私の見解:
App.MediaView.Gallery.Item = Ember.View.extend({
tagName: 'li',
mouseEnter: function(e) {
var $this = $(e.target);
if ($this.is('li')) {
this.toggleDetails('show', $this);
}
},
mouseLeave: function(e) {
var $this = $(e.target);
if ($this.is('li')) {
this.toggleDetails('hide', $this);
}
},
toggleDetails: function(which, $this) {
console.log(which);
console.log($this);
console.log('------------------');
}
});
私のテンプレート:
<ul>
{{#each content}}
{{#view App.MediaView.Gallery.Item}}
<div name="content" {{bindAttr class="size type"}}>
{{#if isImage}}
<img {{bindAttr src="content"}} alt="Title" />
{{else}}
<p>This is a video</p>
{{/if}}
<div class="vignette">
<div class="actions">
<a href="#" class="download">Download</a>
{{#if isImage}}<a href="#" class="enlarge">Enlarge</a>{{/if}}
<div class="clear"></div>
</div>
</div>
</div>
{{/view}}
{{/each}}
</ul>