corpus.blog
41554 blogs · 4,417,066 posts Claim your blog
Record · corpus.blog/posts/01a087b3-dd4f-7160-93f4-00bcb12045cb

Collection of Ember.JS' strict mode / demos of various concepts

nullvoxpopuli.com · published 6 September 2022

A record is what was published and who pointed at it. The text of the post is not held here: read it at the source, or at its Wayback capture.

Read the post at nullvoxpopuli.com Wayback capture
0blogs citing
First cited
—
Most recent
—
Rank this month
not ranked
Links from this post
14
Words captured
402

Cited by

No blog we hold has cited this post yet.

Links from this post

Link
Host
https://limber.glimdown.com
limber.glimdown.com
https://limber.glimdown.com/edit?format=glimdown&t=%23%20RemoteData%0A%0A`RemoteData`%20is%20a%20utility%20`Resource`%20from%20[ember-resources][gh-resources]%0Athat%20provides%20an%20easy%20way%20to%20interact%20with%20[`fetch`][mdn-fetch]%0Awith%20a%20pre-wired%20[`AbortController`][mdn-AbortController].%0A%0AIn%20this%20example%2C%20the%20fetching%20of%20data%20from%20the%20[StarWars%20API][swapi]%20occurs%0Aautomatically%20based%20on%20changes%20to%20the%20URL.%0AYou%20may%20change%20the%20`id`%20of%20the%20Person%20to%20fetch%20from%20the%20StarWars%20API.%0A%0A```gjs%20live%0Aimport%20Component%20from%20%27%40glimmer%2Fcomponent%27%3B%0Aimport%20{%20tracked%20}%20from%20%27%40glimmer%2Ftracking%27%3B%0Aimport%20{%20on%20}%20from%20%27%40ember%2Fmodifier%27%3B%0A%0Aimport%20{%20RemoteData%20}%20from%20%27ember-resources%2Futil%2Fremote-data%27%3B%0A%0Aconst%20urlFor%20%3D%20(id
limber.glimdown.com
https://limber.glimdown.com/edit?format=glimdown&t=%23%20RemoteData%0A%0A%60RemoteData%60%20is%20a%20utility%20%60Resource%60%20from%20%5Bember-resources%5D%5Bgh-resources%5D%0Athat%20provides%20an%20easy%20way%20to%20interact%20with%20%5B%60fetch%60%5D%5Bmdn-fetch%5D%0Awith%20a%20pre-wired%20%5B%60AbortController%60%5D%5Bmdn-AbortController%5D.%0A%0AIn%20this%20example%2C%20the%20fetching%20of%20data%20from%20the%20%5BStarWars%20API%5D%5Bswapi%5D%20occurs%0Aautomatically%20based%20on%20changes%20to%20the%20URL.%0AYou%20may%20change%20the%20%60id%60%20of%20the%20Person%20to%20fetch%20from%20the%20StarWars%20API.%0A%0A%60%60%60gjs%20live%0Aimport%20Component%20from%20%27%40glimmer%2Fcomponent%27%3B%0Aimport%20%7B%20tracked%20%7D%20from%20%27%40glimmer%2Ftracking%27%3B%0Aimport%20%7B%20on%20%7D%20from%20%27%40ember%2Fmodifier%27%3B%0A%0Aimport%20%7B%20use%2C%20resource%20%7D%20from%20%27ember-resources%27%3B%0Aimport%20%7B%20RemoteData%2C%20remoteData%20%7D%20from%20%27ember-resources%2Futil%2Fremote-data%27%3B%0Aimport%20%7B%20keepLatest%20%7D%20from%20%27ember-resources%2Futil%2Fkeep-latest%27%3B%0A%0Aconst%20isEmpty%20%3D%20(x
limber.glimdown.com
https://limber.glimdown.com/edit?format=glimdown&t=%23%20RemoteData%0A%0A%60RemoteData%60%20is%20a%20utility%20%60Resource%60%20from%20%5Bember-resources%5D%5Bgh-resources%5D%0Athat%20provides%20an%20easy%20way%20to%20interact%20with%20%5B%60fetch%60%5D%5Bmdn-fetch%5D%0Awith%20a%20pre-wired%20%5B%60AbortController%60%5D%5Bmdn-AbortController%5D.%0A%0AIn%20this%20example%2C%20the%20fetching%20of%20data%20from%20the%20%5BStarWars%20API%5D%5Bswapi%5D%20occurs%0Aautomatically%20based%20on%20changes%20to%20the%20URL.%0AYou%20may%20change%20the%20%60id%60%20of%20the%20Person%20to%20fetch%20from%20the%20StarWars%20API.%0A%0A%60%60%60gjs%20live%0Aimport%20Component%20from%20%27%40glimmer%2Fcomponent%27%3B%0Aimport%20%7B%20tracked%20%7D%20from%20%27%40glimmer%2Ftracking%27%3B%0Aimport%20%7B%20on%20%7D%20from%20%27%40ember%2Fmodifier%27%3B%0A%0Aimport%20%7B%20use%2C%20resource%20%7D%20from%20%27ember-resources%27%3B%0Aimport%20%7B%20RemoteData%2C%20remoteData%20%7D%20from%20%27ember-resources%2Futil%2Fremote-data%27%3B%0A%0Aconst%20isEmpty%20%3D%20(x
limber.glimdown.com
https://limber.glimdown.com/edit?format=glimdown&t=%23%20Forms%0A%0A%23%23%23%20Using%20_The%20Platform_%0A%0AVanilla%20JavaScript%20has%20everything%20we%20need%20to%20handle%20form%20data%2C%20de-sync%20it%20from%20our%20source%20data%20and%20collect%20all%20user%20input%20upon%20submission.%0A%0AOther%20abstractions%2C%20such%20as%20the%20%22changeset%22%20concept%20contain%20a%20lot%20of%20this%20functionality%20and%20have%20additional%20utilities%20such%20as%20rollback%2C%20snapshots%2C%20forking%2C%20etc%2C%20but%20that%20is%20a%20topic%20for%20another%20demo.%0A%0AIn%20the%20form%20below%2C%20we%20create%20a%20Vanilla%E2%84%A2%20%5BHTML%20form%5D%5B2%5D%2C%20and%20only%20add%20%22Ember%22%20code%20for%20handling%20the%20form%20submission%20and%20field%20inputs.%20By%20default%2C%20form%20submissions%20will%20cause%20a%20page%20reload%2C%20so%20in%20a%20single-page-app%2C%20we%20need%20to%20prevent%20that%20default%20behavior.%0A%0AUsing%20the%20native%20API%2C%20%5BFormData%5D%5B1%5D%2C%20we%20can%20gather%20the%20user%20inputs%20when%20the%20user%20presses%20the%20submit%20button.%0A%0A%60%60%60gjs%20live%0Aimport%20%7B%20on%20%7D%20from%20%27%40ember%2Fmodifier%27%3B%0Aimport%20%7B%20tracked%20%7D%20from%20%27%40glimmer%2Ftracking%27%3B%0A%0Alet%20state%20%3D%20new%20(class%20%7B%0A%20%20%40tracked%20current%3B%0A%7D
limber.glimdown.com
https://limber.glimdown.com/edit?format=glimdown&t=%23%20Checkboxes%20in%20Ember%0A%0A%23%23%20Controlled%20Checkbox%0A%0A%60%60%60gjs%20live%0Aimport%20Component%20from%20%27%40glimmer%2Fcomponent%27%3B%0Aimport%20%7B%20tracked%20%7D%20from%20%27%40glimmer%2Ftracking%27%3B%0Aimport%20%7B%20on%20%7D%20from%20%27%40ember%2Fmodifier%27%3B%0A%0Aexport%20default%20class%20Demo%20extends%20Component%20%7B%0A%20%20%40tracked%20value%3B%0A%0A%20%20update%20%3D%20(event
limber.glimdown.com
https://limber.glimdown.com/edit?format=glimdown&t=%23%20Polling%20data%0A%0AA%20common%20thing%20folks%20ask%20is%20to%20re-call%20%2F%20re-run%20the%20%5Broute%27s%20model%20hook%5D%5Broute-model%5D%20on%20some%20interval.%0A%0AThis%20technique%20can%20be%20used%20to%20poll%20anything%2C%20%0Anot%20just%20the%20%5Brouter%20service%5D%5Brouter-service%5D%27s%20%5B%60refresh%60%5D%5Brouter-refresh%5D%20method.%0AIt%20could%20be%20used%20for%20any%20function%2C%20%5B%60fetch%60%5D%5Bmdn-fetch%5D%2C%20plain%20old%20functions%2C%20etc.%0A%0AWhen%20polling%2C%20the%20most%20important%20thing%20to%20remember%20is%20that%20the%20polling%20function%20needs%20to%20be%20cancelled%20when%20the%20surrounding%20context%20is%20torn%20down%2C%20or%20if%20the%20app%20is%20destroyed.%20This%20is%20so%20that%20as%20you%20navigate%20within%20your%20app%2C%20or%20while%20running%20tests%2C%20a%20memory%20leak%20does%20not%20occur.%0A%0AThis%20approach%20uses%20%5B%60setInterval%60%5D%5Bmdn-setInterval%5D%20so%20as%20to%20not%20induce%20a%20%5B%60too%20much%20recursion%60%5D%5Bmdn-too-much-recursion%5D%20error.%0A%0A%5Brouter-service%5D%3A%20https%3A%2F%2Fapi.emberjs.com%2Fember%2Frelease%2Fclasses%2FRouterService%0A%5Brouter-refresh%5D%3A%20https%3A%2F%2Fapi.emberjs.com%2Fember%2F4.9%2Fclasses%2FRouterService%2Fmethods%2Frefresh%3Fanchor%3Drefresh%0A%5Broute-model%5D%3A%20https%3A%2F%2Fguides.emberjs.com%2Frelease%2Frouting%2Fspecifying-a-routes-model%2F%0A%5Bmdn-fetch%5D%3A%20https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FFetch_API%0A%5Bmdn-setInterval%5D%3A%20https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FsetInterval%0A%5Bmdn-too-much-recursion%5D%3A%20https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FErrors%2FToo_much_recursion%0A%0A%60%60%60gjs%20live%20preview%0Aimport%20%7B%20on%20%7D%20from%20%27%40ember%2Fmodifier%27%3B%0Aimport%20%7B%20cell%2C%20resource%2C%20resourceFactory%20%7D%20from%20%27ember-resources%27%3B%0A%0Aconst%20show%20%3D%20cell(true
limber.glimdown.com
https://limber.glimdown.com/edit?format=glimdown&t=%23%20Clock%20as%20a%20Resource%0A%0AResources%20can%20maintain%20encapsulated%20state%20and%20provide%20a%20reactive%20single%20value.%0A%0A%60%60%60gjs%20live%0Aimport%20Component%20from%20%27%40glimmer%2Fcomponent%27%3B%0Aimport%20%7B%20tracked%20%7D%20from%20%27%40glimmer%2Ftracking%27%3B%0Aimport%20%7B%20resource%2C%20cell%20%7D%20from%20%27ember-resources%27%3B%0A%0Aconst%20Clock%20%3D%20resource((%7B%20on%20%7D
limber.glimdown.com
https://limber.glimdown.com/edit?format=glimdown&t=%23%20Portalling%20via%20%60in-element%60%0A%0A%60%60%60gjs%20live%0Aconst%20getBySelector%20%3D%20(selector
limber.glimdown.com
https://limber.glimdown.com/edit?format=glimdown&t=%23%20Conditional%20Modifiers%0A%0A%60%60%60gjs%20live%20preview%0Aimport%20Component%20from%20%27%40glimmer%2Fcomponent%27%3B%0Aimport%20%7B%20tracked%20%7D%20from%20%27%40glimmer%2Ftracking%27%3B%0Aimport%20%7B%20modifier%20%7D%20from%20%27ember-modifier%27%3B%0Aimport%20%7B%20on%20%7D%20from%20%27%40ember%2Fmodifier%27%3B%0A%0Aexport%20default%20class%20HelloWorld%20extends%20Component%20%7B%0A%20%20%40tracked%20enabled%20%3D%20false%3B%0A%0A%20%20toggle%20%3D%20(
limber.glimdown.com
https://limber.glimdown.com/edit?format=gjs&t=import%20%7B%20on%20%7D%20from%20%27%40ember%2Fmodifier%27%3B%0Aimport%20%7B%20cell%20%7D%20from%20%27ember-resources%27%3B%0A%2F%2F%20shadow-dom%20componentt%20used%20to%20get%20a%20reset%20on%20styling%0A%2F%2F%20this%20is%20showcased%20more%20prominently%20in%20the%20%22Styleguide%22%20demo%0Aimport%20Shadowed%20from%20%27limber%2Fcomponents%2Fshadowed%27%3B%0A%0A%2F%2F%20State%20that%20manages%20the%20%22selected%22%20component%0Aconst%20selected%20%3D%20cell(
limber.glimdown.com
https://limber.glimdown.com/edit?format=glimdown&t=%23%20Effects%20in%20Ember%0A%0AI%20don%27t%20have%20any%20valid%20use%20cases%20for%20effects%20that%20can%20fit%20in%20tiny%20demos%2C%20so%20I%27m%20just%20logging%20to%20the%20console%20when%20each%20effect%20function%20is%20called.%0A%0AWhen%20observing%20the%20behavior%20of%20these%20demos%2C%20be%20sure%20to%20have%20the%20browser%20console%20open.%0A%0A%23%23%20Layout%20Effect%0A%0ARun%20some%20code%20during%20initial%20render%0A%60%60%60gjs%20live%20preview%0Aconst%20myEffect%20%3D%20(
limber.glimdown.com
https://discuss.emberjs.com/t/collection-of-strict-mode-template-demos-of-various-concepts/19637
discuss.emberjs.com
https://discuss.emberjs.com/
discuss.emberjs.com