Skip to content

Instantly share code, notes, and snippets.

@lolmaus

lolmaus/controllers.application\.js

Created November 21, 2022 13:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lolmaus/9453ab2736aa417fffb85b5da5196835 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lolmaus/9453ab2736aa417fffb85b5da5196835 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lolmaus created this gist Nov 21, 2022.
    33 changes: 33 additions & 0 deletions controllers.application\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    import Controller from '@ember/controller';
    import { computed } from '@ember/object';

    export default class ApplicationController extends Controller {
    appName = 'Ember Twiddle';

    owners = [
    {
    pets: [
    {name: 'Foo'},
    ],
    },
    ];

    @computed('owners.@each.pets')
    get petsArrays() {
    return this
    .owners
    .map((owner) => owner.pets);
    }

    @computed('petsArrays.@each.[]')
    get pets() {
    return this
    .petsArrays
    .map(a => a.toArray())
    .flat();
    }

    addPet = () => {
    this.owners[0].pets.pushObject({name: 'Bar'});
    };
    }
    20 changes: 20 additions & 0 deletions templates.application\.hbs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    <button {{on 'click' this.addPet}}>
    Add pet
    </button>


    <h1>each owners; each owner.pets</h1>

    {{#each this.owners as |owner|}}
    {{#each owner.pets as |pet|}}
    <p>{{pet.name}}</p>
    {{/each}}
    {{/each}}



    <h1>each pets</h1>

    {{#each this.pets as |pet|}}
    <p>{{pet.name}}</p>
    {{/each}}
    22 changes: 22 additions & 0 deletions twiddle\.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    {
    "version": "0.17.1",
    "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
    },
    "options": {
    "use_pods": false,
    "enable-testing": false
    },
    "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
    },
    "addons": {
    "@glimmer/component": "1.0.0"
    }
    }