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

• 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 🧌 when using <input>
  • https://ember-twiddle.com/dd0dd9b48140531ccccb - Dynamic attributeBindings.
  • http://rwjblue.jsbin.com/mibagi/edit?html,js,output - Promise constructor is synchronous.

• 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.

• 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)
  • 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.