I've been writing a lot of demos lately in the REPL I've been working on, limber.glimdown.com
This post will be a collection of demos I've used in response to questions from various community members -- for the purpose of finding these again easily, and maybe other folks will f ind them useful as well.
Loading Remote Data
- shows how to use loading state
- keeps the UI stable while new data is loaded / refresh
Demos:
- using Resources - uses resources in the template
- using a
keepLatestResource - uses resources in JS - andkeepLatestfromember-resources - exposing the implementation of
keepLatest- uses resources in JS
Forms / Inputs
- automatic binding of inputs (better than both two-way binding and one-way binding)
- checkboxes
- controlled input (explicit binding)
- uncontrolled input (automatic binding)
Polling
Resources
- Clock - encapsulated state and providing a single reactive value.
Rendering
- elsewhere / with portals via
in-element - conditional modifiers
- dynamically rendering components, statically
Effects
Note that effects should be avoided (in any ecosystem, not just ember). They are an easy thing to grab for, but often a symptom of a bigger problem. Most effects I've seen (whether implemented as helpers (as in the demos below) or as modifiers (like @ember/render-modifiers) should actually just be a @cached getter. Derived data patterns are much easier to debug and provide much nicer stack traces, whereas effects are "pretty much" observers, which can suffer from "spooky action at a distance" or "weird stacktrace".
- calling a function once
- calling a function in response to arg changes
- an effect that relies on auto-tracking to re-run
Originally posted here on the Ember Forums -- there is some additional discussion there as well.