Ember Toggle Switch

Posted on July 04, 2013 - Subscribe - Home

Here is a toggle switch for your Ember app. The CSS is not mine. It's a slightly modified version of Lea Verou. The trick is in the Ember view. You cannot use only a checkbox. A label is required. When the label is clicked, the checkbox toggles which changes the css. The label must be connected to the checkbox with the for attribute. All the checkboxes must have unique IDs. This ensures you can have multiple toggle switches on one page and everything works correctly.

There is one slight drawback with this example. The toggle switch is wrapped in a div. If this is a problem for you, you can change the tagName property on the App.ToggleSwitch. Then move the for attribute into an attributeBindings. I've done it like this because it's easier to see markup structure.

Ember + Simple Bootstrap Typehead

— Adam Hawkins