Ember - Adding an extra action for #link-to

Question

I have a simple Ember application where I have a dynamically generated list of links-to. On a single click per link, I show some detail about the clicked item. I also want to add "ondblclick" event to the link-to. Is this at all possible? If not, I'm not attached to having link-to for single and double clicks. I want to be able to keep the functionality I already have for the single-click event, and also add a double-click event (ideally, without firing a single-click event meanwhile ). I want to be able to store the double clicked titles and ids associated with them. I tried using Ember.View object for this (commented out below), and I tried adding {{action "collectDoubleClicked" on="doubleClick"}} into the link-to, but that doesn't work. No luck so far. Any help will be much appreciated. Here is my 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>

And my 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;
    }
});
**/

possible duplicate of [Combine linkTo and action helpers in Ember.js](http://stackoverflow.com/questions/16124381/combine-linkto-and-action-helpers-in-ember-js) — givanse, Sep 26 '14 at 00:27

score 2 · Answer 1 · answered Nov 07 '13 at 17:15

2

You can try something like this:

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

If my understand is true, span catch event before link. But I think, we have more true way

answered Nov 07 '13 at 17:15

Aleksey

88
6

Thank you, I already tried this one - the link gets fired at the same time. It needs to be an element supporting multiple actions. Maybe Ember doesn't have that? – user2917629 Nov 07 '13 at 17:24
2

You probably want to set `bubbles=false` to avoid the link handling the doubleClick as click. – Miguel Madero Nov 08 '13 at 01:01
Thank you for a though. I added the bubbles=false to link-to and I tried it on the span, but I'm still getting the single-click event fired up. – user2917629 Nov 08 '13 at 17:16

score 0 · Answer 2 · answered Nov 09 '13 at 05:02

0

I don't think there's a way to handle doubleClick without triggering singleClick. Have a look at this jsBin. Before doubleClick is even triggered, click was already triggered twice. I understand what you're trying to do and it makes sense.

answered Nov 09 '13 at 05:02

Miguel Madero

1,948
13
21

Here is something I found about bubble=false on Ember.js site http://emberjs.com/guides/understanding-ember/the-view-layer/#toc_adding-new-events. – user2917629 Nov 11 '13 at 16:53
It says by adding bubble=false on a button inside link-to, would prevent link-to action being triggered. I tried it on a button, on a and on a div, but it doesn't work - the link-to click event gets triggered before the double-click is triggered. Their documentation appears to be off. – user2917629 Nov 11 '13 at 17:09
That is true for the same event. bubble=false click will prevent the click on the parent. link-to listens to click. Setting bubbles=false on dblClick, won't do anything to prevent click (or link-to). – Miguel Madero Nov 13 '13 at 23:40

Ember - Adding an extra action for #link-to

2 Answers2