Events in an ember view

Design
1

This may be a gross misunderstanding of the view concept in Ember…

But is it possible for a view to capture the action events in its template before they hit the controller or route?

Maybe this kind of behavior really belongs in a component?

Are views limited to the kind of events they can receive? e.g. the built in events (click, drag, mouseOver, etc)

Does a view like this make sense?

App.RequirementsView = Ember.View.extend({
    templateName: 'requirementsview',
    events: {
        selectRequirement: function(requirement) {
            // do something with the requirement
            // Then send it along to an event in the controller
            this.get('controller').send('selectRequirement', requirement);
        },
        resetRequirements: function() {
          this.get('controller').send('resetRequirements');
        }
    }
});

In the template imagine you have something like this

Some buttons or

{{#each}}  
    <button {{action "selectRequirement" this }}>Select Requirment</button>
{{/each}}
<button {{action "resetRequirements" }}>Reset Requirments</button>

Or links

{{#each}}    
    <a {{action "selectRequirement" this}} href="#"> Select {{ name }} </a>
{{/each}}

<a {{action "resetRequirements"}} href="#"> Reset Requirments </a>
2

OK to answer my own question here.

This kind of event logic really belongs in a component.

After reading up on the components documentation. I have come to really, really, really like them. Nice and simple and clean.

Here is a JSBin I fired up to demonstrate the use of a component and one way to pass around data:

http://jsbin.com/OMERiGu/1/

Note that the use of the sign up component in both the students and teachers context

{{ sign-up outer=controller people=controller}}

This means you can be very dry and precise with logic in your project.

Great work core team!! I was starting to loath and feel frustrated by Ember JS, but discovering components is making my day and helping me solve some real UI problems in my own projects.

Me gusto muy mucho!!

2 Likes
3

This is great. I am working through using components too. I believe you can eliminate the “outer” binding by using sendAction() from your component, assuming you want to invoke actions on the parent controller. (Again, I am still learning, so I may be wrong about this.) Here is your example updated to remove outer=controller and using sendAction instead:

http://jsbin.com/uquMahE/1/

4

Very cool. Did not know about the sendAction. That is very helpful.