Ember: click event on a view not firing

Asked By: Anonymous

I have a list of race-items, 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.


Solution

Answered By: Anonymous

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

techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno