NullVoxPopuli · May 26, 2021 12:26 · May 26, 2021 · May 26, 2021 · May 26, 2021 · May 26, 2021
diff --git a/controllers.application\.js b/controllers.application\.js
@@ -1,16 +1,16 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
+import { tracked } from 'tracked-built-ins';
 import { set } from '@ember/object';
 
 export default class ApplicationController extends Controller {
   appName = 'Ember Twiddle';
 	@service store;
 
-  user = {
+  user = tracked({
     fullname: '',
     profile: '',
-  };
+  });
 
 
   constructor() {
@@ -23,7 +23,7 @@ export default class ApplicationController extends Controller {
     await new Promise(resolve => setTimeout(resolve, 100)); // fake network
 
     const fullname = `first last`;
-    set(this.user, 'fullname', fullname);
-    set(this.user, 'profile', 'some url');
+    this.user.fullname = fullname;
+    this.user.profile = 'some url';
   }
 }
diff --git a/twiddle\.json b/twiddle\.json
@@ -18,6 +18,7 @@
   },
   "addons": {
     "@glimmer/component": "1.0.0",
-    "ember-data": "3.18.0"
+    "ember-data": "3.18.0",
+    "tracked-built-ins": "1.1.1"
   }
 }
diff --git a/controllers.application\.js b/controllers.application\.js
@@ -20,7 +20,7 @@ export default class ApplicationController extends Controller {
   }
 
   async pretendQueryRecord() {
-    await Promise.resolve(); // fake network
+    await new Promise(resolve => setTimeout(resolve, 100)); // fake network
 
     const fullname = `first last`;
     set(this.user, 'fullname', fullname);

diff --git a/controllers.application\.js b/controllers.application\.js
@@ -9,7 +9,6 @@ export default class ApplicationController extends Controller {
 
   user = {
     fullname: '',
-
     profile: '',
   };
 

diff --git a/controllers.application\.js b/controllers.application\.js
@@ -7,7 +7,7 @@ export default class ApplicationController extends Controller {
   appName = 'Ember Twiddle';
 	@service store;
 
-  @tracked user = {
+  user = {
     fullname: '',
 
     profile: '',

diff --git a/controllers.application\.js b/controllers.application\.js
@@ -9,15 +9,22 @@ export default class ApplicationController extends Controller {
 
   @tracked user = {
     fullname: '',
+
     profile: '',
   };
 
+
   constructor() {
     super(...arguments);
-    this.store.queryRecord('user', {}).then((user) => {
-      const fullname = `${user.firstName} ${user.lastName}`;
-      set(this.user, 'fullname', fullname);
-      set(this.user, 'profile', user.profile?.url);
-    });
+
+    this.pretendQueryRecord();
+  }
+
+  async pretendQueryRecord() {
+    await Promise.resolve(); // fake network
+
+    const fullname = `first last`;
+    set(this.user, 'fullname', fullname);
+    set(this.user, 'profile', 'some url');
   }
 }
diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -3,4 +3,5 @@
 <br>
 <App @user={{this.user}} />
 <br>
-<br>
+<br>
+{{this.error}}
diff --git a/controllers.application\.js b/controllers.application\.js
@@ -8,8 +8,8 @@ export default class ApplicationController extends Controller {
 	@service store;
 
   @tracked user = {
-    fullname: 'Test',
-    profile: 'testurl',
+    fullname: '',
+    profile: '',
   };
 
   constructor() {

diff --git a/components.app\.js b/components.app\.js
@@ -0,0 +1,4 @@
+import Component from '@glimmer/component';
+
+export default class extends Component {
+}
diff --git a/components.user\.js b/components.user\.js
@@ -0,0 +1,4 @@
+import Component from '@glimmer/component';
+
+export default class extends Component {
+}
diff --git a/controllers.application\.js b/controllers.application\.js
@@ -0,0 +1,23 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { set } from '@ember/object';
+
+export default class ApplicationController extends Controller {
+  appName = 'Ember Twiddle';
+	@service store;
+
+  @tracked user = {
+    fullname: 'Test',
+    profile: 'testurl',
+  };
+
+  constructor() {
+    super(...arguments);
+    this.store.queryRecord('user', {}).then((user) => {
+      const fullname = `${user.firstName} ${user.lastName}`;
+      set(this.user, 'fullname', fullname);
+      set(this.user, 'profile', user.profile?.url);
+    });
+  }
+}
diff --git a/models.user\.js b/models.user\.js
@@ -0,0 +1,13 @@
+import Model from 'ember-data/model';
+import attr from 'ember-data/attr';
+/*
+import attr from 'ember-data/attr';
+import { belongsTo, hasMany } from 'ember-data/relationships';
+*/
+
+export default class extends Model {
+  @attr('string') firstName;
+  @attr('string') lastName;
+  @attr() profile;
+}
+
diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -0,0 +1,6 @@
+<h1>Welcome to {{this.appName}}</h1>
+<br>
+<br>
+<App @user={{this.user}} />
+<br>
+<br>
diff --git a/templates.components.app\.hbs b/templates.components.app\.hbs
@@ -0,0 +1,3 @@
+<h1> SOME EXAMPLE </h1>
+
+<User @user={{@user}}/>
diff --git a/templates.components.user\.hbs b/templates.components.user\.hbs
@@ -0,0 +1,4 @@
+<h2>USer details </h2>
+name: {{@user.fullname}}
+<br>
+profile: {{@user.profile}}
diff --git a/twiddle\.json b/twiddle\.json
@@ -0,0 +1,23 @@
+{
+  "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-data": "3.18.0"
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<h1> SOME EXAMPLE </h1>

		<User @user={{@user}}/>
No results found