Skip to content

Instantly share code, notes, and snippets.

@scottmessinger
Last active April 1, 2020 21:21
Show Gist options
  • Save scottmessinger/4598ec7b9b56b1d6db3acc841f3728f7 to your computer and use it in GitHub Desktop.
Save scottmessinger/4598ec7b9b56b1d6db3acc841f3728f7 to your computer and use it in GitHub Desktop.
Problem using map and tracked properties
import Controller from '@ember/controller';
import {action, set, get} from "@ember/object";
import {tracked} from "@glimmer/tracking";
import {
TrackedObject,
TrackedArray
} from 'tracked-built-ins';
export default class ApplicationController extends Controller {
@tracked
course = {
attributes: new TrackedObject({
calendar: new TrackedObject({
dates: new TrackedArray([
new TrackedObject({id: "monday", attributes: new TrackedObject({ lessonId: "a"}) }),
new TrackedObject({id: "tuesday", attributes: new TrackedObject({ lessonId: "a"}) }),
new TrackedObject({id: "wednesday", attributes: new TrackedObject({ lessonId: "a"}) }),
new TrackedObject({id: "thursday", attributes: new TrackedObject({ lessonId: "a"}) }),
new TrackedObject({id: "friday", attributes: new TrackedObject({ lessonId: "a"}) }),
])
})
})
}
get countOfUniqueLessonIds(){
return this.course.attributes.calendar.dates.map(date => date.attributes.lessonId).uniq().length
}
@action makeMondayHaveUniqueLessonId(){
set(this.course.attributes.calendar.dates[0].attributes, "lessonId", "b")
}
}
<strong>Lesson Ids in this Course:</strong>
<ul>
{{#each this.course.attributes.calendar.dates as |date| }}
<li>{{date.id}}: {{date.attributes.lessonId}}</li>
{{/each}}
</ul>
<p>
<strong>Count of unique lesson ids: {{this.countOfUniqueLessonIds}}</strong>
<br>
Should be one and then two after clicking the button
</p>
<button {{on "click" this.makeMondayHaveUniqueLessonId}}>Make Monday have a unique lesson id</button>
{
"version": "0.17.0",
"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.3.1/jquery.js",
"ember": "3.17.2",
"ember-template-compiler": "3.17.0",
"ember-testing": "3.17.0"
},
"addons": {
"@glimmer/component": "1.0.0",
"tracked-built-ins": "1.0.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment