Question

我正在尝试为视图触发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>

Answer 1

基本上，要获取视图创建的DOM元素，您可以使用this.$()，这就是视图元素的jQuery对象。

希望它有所帮助。

灰烬 - 仅为视图父级触发“mouseEnter / mouseLeave”

1 个答案: