Emberjs action in collectionView

Question

I have managed to use the collectionView like this :

App.GroupList = Ember.ArrayController.create({
    content: this.getGroupList(),

    update: function() {
        this.setProperties({content: getGroupList()});
    }
})

App.GroupListView = Ember.CollectionView.extend({
    tagName: 'tbody',
    contentBinding: "App.GroupList"
})

<table class="table-history">
    {{#collection App.GroupListView}}
    <td class="col-left">
        {{view.content.groupName}}
        <span class="col-number-contact">{{view.content.participantCount}}</td>
    </td>
    <td>
        <div class="ph-img"></div>
    </td>
    <td>
        <a {{action "editGroup" view.content}}>
            <div class="ed-img"></div>
        </a>
    </td>
    {{/collection}}
</table>

And as you can see I have put an action helper {{action "editGroup" view.content"}} and this is working well to handle the action in the controller. But I need to handle this action in the view.

When I put the helper like this {{action "editGroup" view.content target=view}} it doesn't work. I have no error, but I also can't catch the event in my view.

My template is called home, and my view App.HomeView = Ember.View.extend({}).

I really don't understand...

I have create a fiddle to show you that it doesn't work : http://jsfiddle.net/NQKvy/902/ If you remove the target=view in the action helper it will trigger the controller handler but nothing happend in the view..

[edit]: Otherwise, is it possible to access a view variable from a controller ? to edit or update a view variable from a controller.

panta82 panta82 · Accepted Answer · 2014-04-17T06:47:20

In your case target="view" will target anonymous view created for each GroupListView's item. You'll probably want something like:

App.GroupListView = Ember.CollectionView.extend({
    tagName: 'tbody',
    contentBinding: "App.GroupList",
    actions: {
        editGroup: function() {
            alert("You Clicked - in GroupListView");
        }
    }
})

<a href="#" {{action "editGroup" view.content target="view.parentView"}}>
    LINK
</a>

Then you can handle your clicks in GroupListView. If you really need it to be in IndexView, you can add another layer of indirection: target="view.parentView.parentView". However, code becomes really brittle then, so I wouldn't recommend it.

At this point, I should warn you that the way you're using views and controllers is not following Ember's guidelines (controller naming, manual controller creation and then binding to a hard-coded instance, ...). Before digging yourself deeper, I would suggest you go through Ember's docs once again and reexamine your code before it calcifies in its current shape.

Emberjs action in collectionView

1 Answers