Ember.js EmberArray invoke() Method

import Route from '@ember/routing/route';

class Item {
    name = null;
    quant = null;
    bucket = null;
    constructor(name, quant, bucket) {
        this.name = name;
        this.quant = quant;
        this.bucket = bucket;
    }

    Show_quantity() {
        return `${this.name} is ${this.quant} 
     in Bucket ${this.bucket}`;
    }
}
export default class
    RichestPeopleRoute extends Route {
    Items = [
        new Item('Tomato', 5, 1),
        new Item('Mango', 1.5, 2),
        new Item('Apple', 3, 2),
        new Item('Carrot', 2, 1),
        new Item('Onion', 1, 2),
        new Item('Cabage', 3, 1),
        new Item('Orange', 2, 1),

    ];
    model() {
        return this.Items;
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set('Items', this.Items);
    }
}

import Ember from 'ember';
import { invoke } from '@ember/array';

export default Ember.Controller.extend({
    actions: {
        invoke_Show() {
            let ans = this.Items.invoke('Show_quantity');
            alert(ans.join('\n'));
        },
    },
});

{{page-title "invoke"}}

<h2>List of Item with Quantity </h2>

<table
    style="border: 2px solid black;
       padding: 30px;"
>
    <tr>
        <th>Name</th>
        <th>Quantity</th>
        <th>Bucket</th>
    </tr>
    {{#each @model as |Eatable|}}
        <tr>
            <td>{{Eatable.name}}</td>
            <td>{{Eatable.quant}}</td>
            <td>{{Eatable.bucket}}</td>

        </tr>
    {{/each}}
</table>
<input
    type="button"
    id="greet"
    value="Show Quatity of each Item"
    {{action "invoke_Show"}}
/>

{{outlet}}

import Route from '@ember/routing/route';

class student {
    name = null;
    gender = null;
    clas = null;
    grade = null;
    constructor(name, gender, clas, grade) {
        this.name = name;
        this.gender = gender;
        this.clas = clas;
        this.grade = grade
    }

    show_grade() {
        return `I am ${this.name} of 
    Class ${this.clas} Get ${this.grade}`;

    }
}

export default class StudentsRoute extends Route {
    students = [new student('Aakash', 'M', 10, 'A',),
    new student('Soniya', 'F', 8, 'C'),
    new student('Esnoor', 'M', 9, 'C'),
    new student('Isha', 'F', 11, 'B',),
    new student('Doman', 'M', 12, 'B'),
    new student('Lolu', 'M', 10, 'A'),
    new student('Satyam', 'M', 10, 'A'),
    ];
    temp2;
    temp;
    model() {
        return this.students;
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set('students', this.students);
        controller.set('temp', this.temp);
        controller.set('temp1', this.temp1);
        controller.set('temp2', this.temp2);
    }
}

import Ember from 'ember';

export default Ember.Controller.extend({
    actions: {
        find_Data() {
            let ans = this.students.invoke('show_grade');
            alert(ans.join('\n'))
        },
    },
});

{{page-title "Student"}}
<h3>List of Students: </h3>
<br /><br />
<table>
    <tr>
        <th>Name</th>
        <th>Gender </th>
        <th>Class </th>
        <th>Grade </th>
    </tr>
    {{#each @model as |detail|}}
        <tr>
            <td>{{detail.name}}</td>
            <td> {{detail.gender}}</td>
            <td>{{detail.clas}}</td>
            <td>{{detail.grade}}</td>
        </tr>
    {{/each}}
</table>

<br />
<br />
<div>
    <input
        type="button"
        id="check-fruit"
        value="Student's Indroduction"
        {{action "find_Data"}}
    />
</div>

{{outlet}}