Sébastien Grosjean's coding blog

Starting to play around with EmberJS I found myself looking for an easy way to create a toggle link.

Here's a simple view helper that handles just this.

When clicked, it will toggle the class name active and trigger the action set to activeBinding. Simple, yet really useful.

// ==========================================================================
// Project:   Ember Handlebar Views : ToogleLink
// Copyright: ©2012 Sébastien Grosjean.
// License:   Licensed under MIT license
// ==========================================================================
var set = Ember.set, get = Ember.get;
/**
  @class
  Creates an HTML link for handling toggle events.
  the view will render as a link element of the 'a' type and HTML
  related properties will be applied directly to the input.
      {{#view Ember.ToggleLink activeBinding="action"}}link{{/view}}
      <a href="#" id="ember1" class="ember-view ember-toggle-link">link</a>
  The `active` attribute of an Ember.ToggleLink object should always be set
  through the Ember object or by interacting with its rendered element representation
  via the mouse, keyboard, or touch.  Updating the value of the link via jQuery will
  result in the active value of the object and its element losing synchronization.
*/
Ember.ToggleLink = Ember.View.extend({
  tagName: 'a',
  href: '#',
  active: false,
  classNames: ['ember-toggle-link'],
  classNameBindings: ['active'],
  click: function() {
    var active = !get(this, 'active');
    set(this, 'active', active);
  }
});