Topcoat Components for Ember.js

Use these components for your Ember.js JavaScript project that uses Adobe's Topcoat CSS framework. This plugin is 100% free, open-sourced, and hosted on GitHub.

Components

Download: Minified · Source

Getting Started

Download the source from above or add to your project via Bower:

  bower install ember-topcoat-components --save

Then include it in your HTML following jQuery, Handlebars, and Ember:

  <!-- Frameworks -->
  <script src="scripts/jquery.js"></script>
  <script src="scripts/handlebars.js"></script>
  <script src="scripts/ember.js"></script>

  <!-- Components and other plugins -->
  <script src="scripts/ember-topcoat-components.js"></script>

  <!-- Your Ember App -->
  <script src="scripts/app.js"></script>

You will now have access to the components within the TC Ember namespace. Before you can use these in your templates, you have to inject them into your app's scope. Quickly do this with the provided TC.inject() function:

  // app.js
  var App = Ember.Application.create();

  // Define controllers, views, etc.
  // ...

  // Components
  TC.inject(App);

  // ...

  App.Router.map(function () {
    // ...
  });

Please enable JavaScript to view a demo