Ember Examples

ember_examples.md

• Data Down / Actions Up

  • http://emberjs.jsbin.com/nayaho/edit?html,js - Interdependent select boxes. No observers.
  • http://ember-twiddle.com/2d7246875098d0dbb4a4 - One Way Input

• Plain JSBin's

  • http://rwjblue.jsbin.com/pixeki/edit?html,js,output

• Ember Version Base JSBin's

  • 1.0 - http://emberjs.jsbin.com/juluje/edit?html,js,output
  • 1.1 - http://emberjs.jsbin.com/cofufo/edit?html,js,output
  • 1.2 - http://rwjblue.jsbin.com/nixiqa/edit?html,js
  • 1.3 - http://rwjblue.jsbin.com/doragu/edit?html,js,output
  • 1.4 - http://rwjblue.jsbin.com/sevevi/edit?html,js,output
  • 1.5 - http://rwjblue.jsbin.com/yaduvu/edit?html,js,output
  • 1.6 - http://rwjblue.jsbin.com/dezacel/edit?html,js,output
  • 1.7 - http://rwjblue.jsbin.com/jehohov/edit?html,js,output
  • 1.8 - http://rwjblue.jsbin.com/fovoje/edit?html,js,output
  • 1.9 - http://rwjblue.jsbin.com/leroku/edit?html,js,output
  • 1.10 - http://emberjs.jsbin.com/rwjblue/309/edit
  • 1.11 - http://emberjs.jsbin.com/rwjblue/373/edit?html,js,output
  • 1.12 - http://jsbin.com/nidipe/edit?html,js,output
  • 1.13 - http://rwjblue.jsbin.com/xovivo/edit?html,js,output
  • 2.0 - http://rwjblue.jsbin.com/zesoni/edit?html,js,output
  • 2.1 - http://rwjblue.jsbin.com/hiqago/edit?html,js,output
  • 2.2 - http://rwjblue.jsbin.com/wuforo/edit?html,js,output
  • 2.3 - http://rwjblue.jsbin.com/zulacu/edit?html,js,output
  • 2.4 - http://rwjblue.jsbin.com/wixeka/edit?html,js,output
  • 2.5 - http://rwjblue.jsbin.com/yulirep/edit?html,js,output
  • 2.6 - http://rwjblue.jsbin.com/tokefox/edit?html,js,output
  • 2.7 - http://rwjblue.jsbin.com/rebibe/edit?html,js,output
  • 2.8 - http://jsbin.com/madolo/edit?html,js,output
  • 2.9 - https://jsbin.com/jecucot/edit?html,js,output
  • 2.10 - https://jsbin.com/xajuyi/edit?html,js,output
  • 2.11 - https://jsbin.com/rewarah/edit?html,js,output
  • 2.12 - https://jsbin.com/pisehoq/edit?html,js,output
  • 2.13 - https://jsbin.com/ricebum/edit?html,js,output
  • release - https://jsbin.com/lizobi/edit?html,js,output
  • beta - https://jsbin.com/fuyodet/edit?html,js,output
  • canary - https://rwjblue.jsbin.com/solokun/edit?html,js,output
  • alpha - https://rwjblue.jsbin.com/comewa/edit?html,js,output

• Other

  • http://emberjs.jsbin.com/rwjblue/251/edit?html,js,output - Opening a window and communicate with it.
  • http://emberjs.jsbin.com/rwjblue/55/edit - Using liquid-fire animations in globals mode.
  • http://emberjs.jsbin.com/rwjblue/593/edit - Modify computed dependent keys after initialization.
  • http://emberjs.jsbin.com/siforo/edit?js,output - Define computed property after object initialization.
  • http://emberjs.jsbin.com/rwjblue/299/edit?js,output - simplified version of ic-ajax
  • http://emberjs.jsbin.com/rwjblue/337/edit?html,js,output - Detect if Mixin was mixed into a Class
  • http://rwjblue.jsbin.com/rebaru/edit?html,output - Handlebars whitespace control
  • http://emberjs.jsbin.com/rwjblue/401/edit?html,css,js - Many Ember Apps on the same page.
  • http://emberjs.jsbin.com/rwjblue/473/edit?html,js,output - Improved Actions!
  • http://rwjblue.jsbin.com/rwjblue/620/edit?html,js,output - Auto-mutate action.
  • http://emberjs.jsbin.com/rwjblue/505/edit?js,output - Scroll element into view, from hash fragment.
  • http://rwjblue.jsbin.com/reyuqo/edit?html,js,output - Overriding a service or factory in the container (prevents using resolved value).
  • http://rwjblue.jsbin.com/higeso/edit?html,js,output - Completely dynamic {{link-to}} (dynamic route name and variable dynamic segments). Works on 2.1.1+.
  • https://ember-twiddle.com/1d991f7127290eabc953?numColumns=1 - Avoid owner._lookupFactory (or container.lookupFactory) and still control manual object creation.
  • http://ember-twiddle.com/afd593c0bb0130b280c5 - Cursor position :troll: when using <input>
  • https://ember-twiddle.com/dd0dd9b48140531ccccb - Dynamic attributeBindings.
  • http://rwjblue.jsbin.com/mibagi/edit?html,js,output - Promise constructor is synchronous.
  • https://ember-twiddle.com/569e40aef2b4158096db68607b73da59 - Using a linked list with {{#each.

• POJO's

  • http://emberjs.jsbin.com/rwjblue/253/edit?js,output - Defining computed properties on a POJO.

• Routing

  • http://rwjblue.jsbin.com/zasujoh/edit?html,js,output - Shows route hook ordering.
  • http://emberjs.jsbin.com/rwjblue/255/edit?html,js,output - Keyboard shortcuts with mousetrap.
  • http://emberjs.jsbin.com/rwjblue/38/edit - List known routes.
  • http://emberjs.jsbin.com/rwjblue/166/edit - Route hooks for nested routes.
  • http://emberjs.jsbin.com/rwjblue/334/edit?html,js,output - link-to active state logging
  • http://ember-twiddle.com/a77b3db275d91c7f34c2?numColumns=0 - Demo of loading states and substates.
  • http://emberjs.jsbin.com/vuloju/edit?html,js - Smart scroll location implementation. Scroll to top for forward transitions...
  • http://rwjblue.jsbin.com/jipani/edit?html,js - {{route-action}} helper

• Service

  • http://emberjs.jsbin.com/luhoquxi/7 - Growl Notifications (by @bcardarella)
  • Simple Ember.inject.service demo ("logger" service).
    • http://emberjs.jsbin.com/rwjblue/270/edit?html,js,output
    • http://emberjs.jsbin.com/rwjblue/317/edit?html,js -- Unit/Integration Tests for the "Logger" service.
  • http://emberjs.jsbin.com/guzoru/edit?js - generateEventedServiceFor -- Generates a mixin to subscribe to services events.

• View

  • http://emberjs.jsbin.com/xavox/1/ - Illustrates how to clear classNames. (by @knownasilya)
  • http://jsbin.com/rwjblue/392/edit?html,js,output - Shows how to target actions from within a view.

• HTMLBars

  • Block Params
    • http://emberjs.jsbin.com/rwjblue/135/edit?html,js,output - {{for-each-color}}
    • http://emberjs.jsbin.com/rwjblue/138/edit?html,js,output - Simple block params example.
    • http://emberjs.jsbin.com/rwjblue/157/edit?html,js,output - Bound and unbound helper examples.
    • http://emberjs.jsbin.com/rwjblue/310/edit?html,js,output - Targeting actions to a parent component from the components template.
  • http://emberjs.jsbin.com/rwjblue/288/edit - {{else <some helper>}}
  • http://emberjs.jsbin.com/rwjblue/222/edit - {{bind-action}} helper to pass a wrapped action as a block param.
  • http://emberjs.jsbin.com/rwjblue/394/edit?html,js,output - {{bind-action}} helper + multi-level action passing.
  • http://emberjs.jsbin.com/rwjblue/262/edit - <div class={{specialColor}}></div> bind-attr less attribute binding.
  • http://emberjs.jsbin.com/rwjblue/311/edit?html,js,output - Disable {{bind-attr}} (requires 1.11 or greater).
  • http://emberjs.jsbin.com/rwjblue/340/edit?html,js,output - is-last sub-expression / helper.
  • http://emberjs.jsbin.com/rwjblue/503/edit - hasBlock polyfill
  • http://rwjblue.jsbin.com/kifeju/edit?html,js,output - iterate through keys in object ({{each-in}}), and have mutable input (mut and get) for each.
  • http://rwjblue.jsbin.com/nuyujo/edit?js - AST transform using visitor API (Ember 2.0.0+)
  • http://rwjblue.jsbin.com/rujeji/edit?html,js - AST Transform changing SubExpression (v-get) into PathExpression.
  • http://jsbin.com/yomugu/edit?html,js - AST Transform for removing an element attribute (data-test).
  • http://rwjblue.jsbin.com/vayamom/edit?html,js,output - AST Transform for detecting static strings in templates.
  • http://rwjblue.jsbin.com/kanamav/edit?html,js,output - AST Transform for detecting invalid block indentation (thanks to @matteddy)
  • http://rwjblue.jsbin.com/dubiza/edit?html,js,output - AST Transform for detecting triple curlies
  • http://rwjblue.jsbin.com/jenenip/edit?js,output - AST Transform to detect all template invocations of components or helpers.
  • http://jsbin.com/kuweki/edit?html,js,output - AST Transform to provide the template's moduleId

• Components

  • http://emberjs.jsbin.com/kenum/3/edit - Drag & Drop Component (by @rpflorence).
  • http://emberjs.jsbin.com/rwjblue/285/edit?html,js,output - Mark parent element of {{link-to}} as active.
  • http://emberjs.jsbin.com/lokozegi/121/edit - Modal dialog (by @denisnazarov).
  • http://emberjs.jsbin.com/jacex/1 - Popover.
  • http://emberjs.jsbin.com/rwjblue/58/edit - Custom checkbox that sends an action upon being checked.
  • http://emberjs.jsbin.com/kopax/2/edit - Using a components Layout for standard string output (without precompiling).
  • http://emberjs.jsbin.com/xomag/1/edit - Dynamic lookup of a component. magic
  • http://emberjs.jsbin.com/rwjblue/56/edit - Component with inverse (NOTE: hash params not bound)
  • http://emberjs.jsbin.com/rwjblue/325/edit - TinyMCE
  • http://emberjs.jsbin.com/rwjblue/142/edit - RadioButton component
  • http://emberjs.jsbin.com/rwjblue/269/edit - Using viewName to access a sibling view/component's Id.
  • http://emberjs.jsbin.com/kuzenip/edit?html,js,output - Build a properly labeled-input without double render.
  • http://emberjs.jsbin.com/rwjblue/278/edit - Using key-up and key-down with {{input}}.
  • http://emberjs.jsbin.com/rwjblue/279/edit?js,output - Render custom components without compiling at runtime.
  • http://emberjs.jsbin.com/rwjblue/322/edit?html,js,output - document title component
  • http://emberjs.jsbin.com/rwjblue/343/edit?html,js,output - {{each-keys}} component to iterate object keys
  • http://emberjs.jsbin.com/rwjblue/569/edit?html,js,output - easy-form ish API using Ember 1.13+
  • http://emberjs.jsbin.com/rwjblue/584/edit?html,js,output - <input> without {{input}} via improved actions...
  • http://rwjblue.jsbin.com/bofijik/edit?js,output - Using Javascript getters from templates.
  • http://jsbin.com/katado/edit?js,output - Creating accessor helper.

• Handlebars Helpers

  • http://emberjs.jsbin.com/rwjblue/75/edit - {{super}}
  • http://emberjs.jsbin.com/rwjblue/136/edit?html,js,output - Recompute on changes from outside source (using streams).
  • http://rwjblue.jsbin.com/nodawo/1/edit?html,js - Ember.Helper recompute on array length/property changes.
  • http://rwjblue.jsbin.com/samamuf/edit?html,js - parse-int helper
  • https://ember-twiddle.com/a6a058514dd69008e477 - Ember.Helper recompute on array lenght changes. get-at-index helper.

• Select

  • http://emberjs.jsbin.com/vodab/3/edit - Ember.Select with disabled options.
  • http://emberjs.jsbin.com/jaqak/1/edit - Fast Single Select (SUPER FAST)
  • http://emberjs.jsbin.com/rwjblue/122/edit - {{async-select}} - Pretty simple, but handles initialValue, prompt, and options.
  • http://emberjs.jsbin.com/rwjblue/585/edit?html,js,output - improved actions + native change event handler === super simple

• Controllers

  • http://emberjs.jsbin.com/hisuc/1/edit - Observing itemControllers in a virtual ArrayController.
  • http://emberjs.jsbin.com/hawa/7/edit - Sorting by a property on an itemController.

• Testing

  • http://rwjblue.jsbin.com/yagati/1/edit?html,js,output - Basic Acceptance test (QUnit)
  • https://jsbin.com/gadumar/edit?js,output - Basic Acceptance Test (QUnit 2.x, ember.prod.js)
  • http://emberjs.jsbin.com/genolo/edit?html,js - Basic Integration Test (Mocha)
  • http://rwjblue.jsbin.com/pixigu/edit?html,js - Basic moduleForComponent integration test.
  • http://jsbin.com/daloriq/edit?js,output - Test eq helper with moduleForComponent.
  • http://rwjblue.jsbin.com/tefeke/edit?js,output - Adding a custom assertion assert.currentURLEqual to QUnit.assert.
  • http://jsbin.com/ojUGebes/1/edit - Ember Testing Template Testing Components
  • http://jsbin.com/UGaTasU/5/edit - Ember Testing Template Testing Components w/o Container
  • http://jsbin.com/ECoTIP/4/edit - Ember Testing Template Testing Handlebars Helper
  • http://emberjs.jsbin.com/AXOHogI/4/edit?html,js - old version Ember Testing Template General Integration Test
  • http://emberjs.jsbin.com/uvEVegO/3/edit - Ember Testing Template Initializer Test
  • http://emberjs.jsbin.com/ezeMoQO/1/edit - Ember Testing Template Initializer Test with Em.run.later
  • http://jsbin.com/aZIqEtAv/1/edit - Ember Testing Template Testing View Rendering to Buffer
  • http://emberjs.jsbin.com/oZemaGA/1/edit - Ember Testing Template easyForm

Plain HTML:

• http://jsbin.com/sicos/1/edit?html,output
• http://rwjblue.jsbin.com/jiropo/edit?html,output - Making Enter in an input submit a button other than the default/first one.

Plain Javascript:

• http://jsbin.com/fitoje/edit?js,output - Tagged template string to strip whitespace before and after a newline (but not at concat boundaries).

Babel Plugin:

• https://astexplorer.net/#/gist/9cd6b3d1a7cfabd5290db4a7ff5dc26b/b184ec2cb4409044e84b5de591fc4c95b58cd696 - htmlbars-inline-precompile babel plugin

Codemods:

• https://astexplorer.net/#/gist/e3e6c6d5b1172e3ba80c4a9c0a18e0f2/6975e94674a76141b6dcf2f16aa6bf8346bad335 - Replace .extend({ foo: {} }) with .extend({ init() { this._super(...arguments); this.foo = {}; } }).

@jamesarosen - Thanks, glad you like them!

• Fixed the "opening a window" JSBin (isn't HTMLBars validation great!).
• RE: activate and deactivate: no, the default implementation is Ember.K so no _super should be required (unless you also have additional mixins that you may want to coordinate with).

Awesome list! Really useful.

Pretty nice, thanks :)

+infinity

+1

@rwjblue Many of these are not working due to :
Error: Cannot call compile without the template compiler loaded. Please load ember-template-compiler.js prior to calling compile.

Looks like this issue on beta.1: emberjs/ember.js#10265.

@mfpiccolo - Yep, as I access them again to reference, I am updating them. If I have a chance to review them all and get 'em updated I will....

Awesome list! I was hoping to find a example w/ Dropzone.js (http://www.dropzonejs.com/).

Maybe something on unit testing controllers with models and saving them?

here is the updated viewName example emberjs/ember.js#11156 (comment)

I use this a lot and appreciate it. :) Thanks for making it.

Not sure the proper way to suggest an edit. In this one http://emberjs.jsbin.com/rwjblue/569/edit?html,js,output there seems to be an extra - before concat in the html. I think this:

{{ef-custom-input id=(-concat elementId "-input" separator="") value=currentValue parent=this}}

should be this:

{{ef-custom-input id=(concat elementId "-input" separator="") value=currentValue parent=this}}

Really awesome list. Thanks for sharing!

Awesome list, and amazing reference!
Just one to add to the fix'em up list, http://emberjs.jsbin.com/rwjblue/55/edit - Using liquid-fire animations in globals mode .
If you can compile liquid-fire up to ...-liquid-fire-0.23.0.js and add ember-template-compiler.js I think you'd be most of the way there on version compatibility with Ember 2.3.

In every example with checkbox or radio button the console gives some error and it cant run . Here is one of the pages example http://emberjs.jsbin.com/rwjblue/58/edit?html,js,output