Emberjs: Get the current element

Question

I am looking for something that's similar to the this of jQuery. I'm going to list below the code I have:

<script type="text/x-handlebars" data-template-name="uiMainContainerTaskList">
    <div class="uiMainContainerTaskListContent">
    {{#view App.TasksView}}
    {{#each App.tasksController.tasks}}
    <div class="uiMainContainerWideItem" {{action "taskClick" target="TasksView" on="click"}}>
        <div class="uiMainContainerWideItemCheckbox">{{view Em.Checkbox checkedBinding="isDone"}}</div>
        <div class="uiMainContainerWideItemText uiMainContainerWideItemTaskName">{{taskName}}</div>
        <div class="uiMainContainerWideItemText uiMainContainerWideItemTaskDescription">{{taskDescription}}</div>
        <div class="uiMainContainerWideItemText uiMainContainerWideItemTaskPriority">{{priority}}</div>
        <div class="uiMainContainerWideItemText uiMainContainerWideItemTaskDueDate">{{dueDate}}</div>
    </div>
    {{/each}}
    {{/view}}
    </div>
</script>

I bind the taskClick action to the div.uiMainContainerWideItem. In my View I have:

App.TasksView = Em.View.extend({
    templateName: 'uiMainContainerTaskList',
        taskClick: function(e) {
            console.log($(this)); 
        }
});

In jQuery, $(this) would be the current element (no children). Is there a way to get the current element in Ember as well?

score 48 · Accepted Answer · edited May 04 '17 at 04:55

48

I believe you are looking for this.$().

edited May 04 '17 at 04:55

Hod - Monica's Army

865
14
28

answered Aug 07 '12 at 16:31

Jason P

1,415
14
12

one problem. It returns `
` instead of the current `
`(which is the element that I bind the action to).
– Andrew Aug 07 '12 at 16:44
solved. I added the declaration of the view inside the each block. Now it returns the current div. Thanks for the information above :) – Andrew Aug 07 '12 at 16:49
Could you provide more details on this, @Andrew? I can't seem to get anything but the view, rather than the clicked element. – Ruben Martinez Jr. Jun 24 '14 at 18:03

score 21 · Answer 2 · answered Mar 06 '14 at 20:47

21

You can call this.get('element') to get the actual element.

See: Ember View Documentation

answered Mar 06 '14 at 20:47

vramon

596
1
4
11

score 2 · Answer 3 · edited May 23 '17 at 12:34

2

I know is an old question but since views are deprecated (and if you are not needing this for a component), you can pass the action to the dom onclick event and get the event js object in the last parameter of the action.

Please check https://stackoverflow.com/a/37066157/2726189

hope it helps

edited May 23 '17 at 12:34

Community

1
1

answered May 06 '16 at 07:01

dolcalmi

796
8
13

Fantastic. Thank you. – Xavier Aug 19 '16 at 01:27

score 1 · Answer 4 · answered Oct 05 '22 at 13:10

Now a VERY old question but we are removing jQuery and used the following vanilla JS to get the DOM element

document.querySelector(`#${this.element.id}`);

along with a {{did-insert this.functionThatCallsTheAboveCode}} on the component's wrapping div.

Emberjs: Get the current element

4 Answers4

Linked