灰烬：未触发视图的click事件

Question

I have a list of race-item s, each rendered as a view:

        <ul>
            {{#each race in controller}}
                {{render "race-item" race class="race-item"}}
                {{else}}
                <li id="imagine">{{#link-to 'races.create'}}Imagine Faster{{/link-to}}</li>
            {{/each}}
        </ul>

In the view class, I want use a click event to toggle a property:

App.RaceItemView = Ember.View.extend({
    tagName: 'li',
    templateName: 'raceItem',
    classNameBindings: ['isSelected:selected'],
    isSelected: false,
    click: function(e) {
        this.set('isSelected', true);
    }
});

This click event will not fire, it seems, unless it is a DOM element that normally handles clicks ( a , button , etc.).

How can I get a click to fire on my li ? I wrap everything in an anchor because there are child elements with their own events and actions.

Followup question: It seems like even if I get my click working, it will only set the current view's isSelected property to true, but not toggle the rest of the views properties to false. Tips on accomplishing that?

Thanks. I'm dyin' here.

Answer 1

Click events should work for all elements, including li. There are a number of ways to achieve what you are looking for: one is to send an event to the controller:

App.ItemView = Ember.View.extend({

  tagName: 'li',
  templateName: 'item-view',
  classNameBindings: ['isSelected:selected'],
  isSelected: false,
  click: function(e) {
    this.set('isSelected',true);
    this.get('controller').send('itemSelected', this);
  }

});

Here is a working example: http://jsbin.com/tolod/2/edit?html,js,output