Ember - 为 #link-to 添加额外的操作

Question

我有一个简单的 Ember 应用程序，其中有一个动态生成的链接列表。在每个链接单击一次时，我会显示有关单击项目的一些详细信息。 我还想在链接中添加“ondblclick”事件。这是可能吗？如果没有，我不喜欢单击和双击的链接。 我希望能够保留单击事件已有的功能，并添加双击事件（理想情况下，同时不触发单击事件）。我希望能够存储与它们关联的双击标题和 ID。 我尝试为此使用 Ember.View 对象（在下面注释掉），并尝试将 {{action "collectDoubleClicked" on="doubleClick"}} 添加到链接中，但这不起作用。到目前为止没有运气。 任何帮助都感激不尽。 这是我的 HTML：

<script type="text/x-handlebars" data-template-name="application">
    <div id="headerDiv">
        <ul>
            <li>
               <image src="logo.png" style="width:439px;height:102px;"/>
            </li>
            <li>
                {{#link-to 'home'}}Home{{/link-to}} | {{#link-to 'help'}}Help{{/link-to}}
            </li>
        </ul>
    </div>

    <div class="collections">
        {{partial 'collections'}}
    </div>

    <div class="statistics">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" id="collections">
    <div id='collectionsDiv'>
        {{#each}}
            {{#link-to 'item' this }}   <!-- {{action "collectToSearch" on="doubleClick"}} -->
                {{title}}
            {{/link-to}}
        {{/each}}
    </div>
</script>

还有我的 JavaScript：

App = Ember.Application.create();

App.Router.map(function () {
    this.resource('home', {
        path: '/'
    });
    this.resource('help');
    this.resource('item', {
        path: ':item_id'
    });
});

App.ApplicationRoute = Ember.Route.extend({
    model: function () {
        return items;
    }
});
var items = [{
    id: 1,
    title: 'Item 1',
    contentType: 'Image',
    description: 'description 1'
}, {
    id: 2,
    title: 'Item 2',
    contentType: 'Text',
    description: 'description 2'
}, {
    id: 3,
    title: 'Item 3',
    contentType: 'Undefined',
    description: 'description 3'
}];

App.ApplicationController = Ember.ArrayController.extend({
    actions: {
        collectDoubleClicked

        function () {
            console.log("collectToSearch: ", this.get('model.title'));
        }
    }
});

/**
App.Application = Ember.View.extend({
    itemTitles: [items.length],
    itemIds: [items.length],
    itemCountDoubleClick: 0,

    doubleClick: function (title, id) {
        console.log("double click");
        itemTitles[itemCountDoubleClick] = title;
        itemIds[itemCountDoubleClick] = id;
        itemCountDoubleClick++;
        return false;
    }
});
**/

Answer 1

我认为没有办法在不触发 singleClick 的情况下处理 doubleClick。看看这个jsBin。在 doubleClick 被触发之前，click 已经被触发了两次。我理解你想要做什么，这是有道理的。

Answer 2

你可以试试这样的：

{{#link-to 'item' this }}
    <span {{action "doubleClickAction" on="doubleClick"}}>
        {{title}}
    </span>
{{/link-to}}

如果我的理解是正确的，请在链接之前跨越捕获事件。 但我认为，我们有更真实的方式