Help with 'Ember interactivity: Events, classes and state' module

MDN Learn
1

I am not getting the right result when trying to follow the Ember interactivity: Events, classes and state module. The module asks you to tell ember to create a header.js class file and put the following in it:

import Component from ‘glimmer/component’;
import { action } from ‘ember/object’;

export default class HeaderComponent extends Component {

action
onKeyDown({ target, key }) {
let text = target.value.trim();
let hasValue = Boolean(text);

if (key === 'Enter' && hasValue) {
  alert(text);

  target.value = ''
}

}
}


When you go to the webpage that your are serving locally, you should be able to type text and hit enter. Then an alert should show the text you typed. No alert is happening for me. I am working in visual studio code and it gives me the following error

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.

I'm not sure if that is related. Here is the link to my code so far on GitHub. The only thing I've tried is going back through the tutorial to see if I skipped anything. Could you tell my if skipped a step or incorrectly implemented what the module tells you to do? I have removed the 'at' symbols from the example code on here because I think they were being treated like mentions.
2

Hello @matthew-c

i have issue with all the links in your post
so i need link to the topic or test you asking about and also link to your work

3

Hello @justsomeone
I think the links are fixed now.

4

thanks @matthew-c

let me ask @jwhitlock help as i have no knowledge about the ember framework

and have a nice day both of you :slight_smile:

5

Hi @matthew-c! I’m not familiar with the MDN Ember tutorial, but I can see if I can get you unstuck.

Looking at https://github.com/matthew-c-developer/todomvc, I do not see the changes from the previous tutorial page, at Ember app structure and componentization - Learn web development | MDN. Specifically, https://github.com/matthew-c-developer/todomvc/blob/main/app/templates/application.hbs should have a lot more content. Does the project on GitHub match your local project? You may need to commit changes and push them to GitHub. If not, you may need to go back to that step of the tutorial.

In Discourse, you can use three single quotes (```) at the start and end of a block of code (same as Markdown). This is easier than using four spaces to indent the code:

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class HeaderComponent extends Component {

  @action
  onKeyDown({ target, key }) {
    let text = target.value.trim();
    let hasValue = Boolean(text);

    if (key === 'Enter' && hasValue) {
      alert(text);

      target.value = ''
    }
  }
}

The tutorial has you use Ember to generate files. Those commands may generate more than just the files mentioned to edit, so try to use ember when the tutorial asks you to do that.

For the error, the most effective thing is to copy and paste that error into a search engine and find a webpage that relates to your issue. I found these:

Working through errors in a tutorial is more than half of learning, unfortunately. If the MDN tutorial has too many sharp edges, you may want to start over with the official EmberJS tutorial:

Good luck!

1 Like