How to use functions, events and html DOM in ember?

[ef4]

Hi @Nar_Zantaria. There’s a lot going on here that makes it hard to focus on one piece at a time. I’ll start with a high level summary:

0. Make a new ember app with ember new my-app. All the other files I mention here will be inside that project. cd my-app and run ember s to start the development server. You will see the welcome message at http://localhost:4200.

1. Your json file isn’t really a json file, it’s a javascript file. The confusion between the two may give you trouble. You’re currently loading it as a <script> but that won’t work for a real json file. I’m going to assume we’re using a valid json file and I’ll put it into public/fixed-data.json:

   {
     "first": {
       "a": 14,
       "b": 37,
       "c": 117,
       "d": 893,
       "e": 11
     },
     "second": {
       "a": 89,
       "b": 777,
       "c": 9,
       "d": 3,
       "e": 57
     }
   }
   

   The public folder is where you can put any files inside an Ember app that you want to publicly available, unchanged, in the final application.

2. I will assume we want to put this demo onto the “homepage” of our application, so I’m going to work in the application route, which is the very topmost / main route that always renders in an Ember application. (Later in a real application you will probably want to move this onto some other route, so you can have different routes display different things.)

3. To load the data, make a Route file named app/routes/application.js like this:

   import Route from '@ember/routing/route';
   
   export default Route.extend({
     async model() {
       return (await fetch('/data.json')).json();
     }
   });
   

4. Then edit app/templates/application.hbs. You can remove the initial content that’s in there about <WelcomePage />. First, let’s just make sure our data is loaded correctly by printing it out:

   {{#each-in model as |section value|}}
     <h1>{{section}}</h1>
     {{#each-in value as |name count|}}
       <div>{{name}}={{count}}</div>
     {{/each-in}}
   {{/each-in}}
   

   You should now see your data printed in the browser. The model here corresponds with the model in app/routes/application.js. It holds your data. The rest of that snippet is just iterating over both levels of your file and printing out the values.

5. Next, instead of just printing the data we’re going to pass it into a component (we didn’t make the component yet, that will be the next step). Add this to to app/templates/application.hbs:

   <ColorDemo @data={{model}} />
   

6. Now we need to make the component. You can run ember generate component color-demo in the terminal to get the files created automatically, or you can make them by hand. Here is the template file (app/templates/components/color-demo.hbs), which I based on your original HTML:

    <div class="container">
      <div class="wrapper">
        <div id="items" style="display: flex; justify-content: space-between;">
          {{#each-in this.items as |id value|}}
            <div onclick={{action this.showIt value}} style="width: 100px; height: 100px; background-color: coral"></div>
          {{/each-in}}
        </div>
   
        <br><br>
   
        <select onchange={{action this.changeSection}} style="display: block;">
          <option value="first" selected>First values</option>
          <option value="second">Second values</option>
        </select>
   
      </div>
    </div>
   

   And here is the Javascript file (app/components/color-demo.js):

    import Component from '@ember/component';
    import { computed } from '@ember/object';
   
    export default Component.extend({
      section: 'first',
      items: computed('section', 'data', function() {
        return this.data[this.section];
      }),
      changeSection(event) {
        this.set('section', event.target.value);
      },
      showIt(value) {
        alert("Value = " + value);
      }
    });
   
   

   At this point it does everything except change the colors based on the data. For that, I’m going to make a separate helper function.

7. Make a helper app/helpers/style-for-value.js:

    import { helper } from "@ember/component/helper";
    import { htmlSafe } from '@ember/template';
   
    export function colorForValue([n]) {
      let color;
      if (n < 15) {
        color = "red";
      }
      if (n >= 15 && n < 50) {
        color = "green";
      }
      if (n >= 50 && n < 100) {
        color = "blue";
      }
      if (n >= 100) {
        color = "yellow";
      }
      return htmlSafe(`width: 100px; height: 100px; background-color: ${color}`);
    }
   
    export default helper(colorForValue);
   

8. Then we will use the helper function. Change the template from this:

   <div onclick={{action this.showIt value}} style="width: 100px; height: 100px; background-color: 
   coral"></div>
   

   To this:

    <div onclick={{action this.showIt value}} style={{style-for-value value}}></div>