Skip to content

Instantly share code, notes, and snippets.

@raido
Last active October 12, 2020 12:07
Show Gist options
  • Save raido/6cb6d59ceeb52bc14bd1550e4b356f9b to your computer and use it in GitHub Desktop.
Save raido/6cb6d59ceeb52bc14bd1550e4b356f9b to your computer and use it in GitHub Desktop.
Helper Entangle Tracking Context
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
export default class ApplicationController extends Controller {
@service
myService;
appName = 'Ember Twiddle';
}
import Helper from '@ember/component/helper';
import { inject as service } from '@ember/service';
import { run } from '@ember/runloop';
export default class MyHelper extends Helper {
@service
myService;
compute(params, _hash) {
// @tracked works if push is queued with runloop
/*run.schedule('actions', () => {
this.myService.pushItem({
title: params.join(""),
..._hash
});
});*/
this.myService.pushItem({
title: params.join(""),
..._hash
});
}
}
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';
export default class MyService extends Service {
//@tracked
items = [];
pushItem(item) {
this.items = [...this.items, item];
}
}
<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
{{my-helper "My title"}}
{{#each this.myService.items as |item|}}
{{item.title}}
{{/each}}
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment