Resources

components.uses-resource\.js

import Component from '@glimmer/component';

import { tracked } from "@glimmer/tracking";
import { cached } from "ember-cached-decorator-polyfill";

class Resource {
  @tracked named = null;
  @tracked positional = null;
  
  constructor(update) {
    this.update = update;
  }

  @cached
  get args() {
    const args = this.update();
    if (Array.isArray(args)) {
      return {
        named: {},
        positional: args,
      };
    } else {
      return {
        named: args.named || {},
        positional: args.positional || args,
      };
    }
  }

  @cached
  get data() {
    const data = [];
    const term = this.args.positional[0];
    if (!term) { 
      return null;
    }
    for (let i = 0; i < 10; i++) {
      data.push({ name: "Term: " + term + " : " + (i + 1) });
    }
    
    return data;
  }
}

export default class extends Component {
  resource = new Resource(() => [this.args.searchTerm]);
}

controllers.application\.js

import Controller from '@ember/controller';

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

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<label>Search Term: <Input @value={{this.appName}} /></label>
<UsesResource @searchTerm={{this.appName}} />
<br>
{{outlet}}
<br>
<br>

templates.components.uses-resource\.hbs

<ul>
  {{#each this.resource.data as |result|}}
    <li>{{result.name}}</li>
  {{/each}}
</ul>

twiddle\.json

{
  "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",
    "ember-cached-decorator-polyfill": "0.1.4"
  }
}