Ember.js EmberArray invoke()方法

Ember.js 是一个开源的JavaScript框架，用于开发基于模型-视图-控制器（MVC）架构的大型客户端Web应用程序。 Ember.js是最广泛使用的前端应用程序框架之一。它旨在加快开发速度和增加生产力。目前，许多网站都在使用它，包括Square、Discourse、Groupon、LinkedIn、Live Nation、Twitch和Chipotle等。

invoke()方法 用于调用数组项的指定方法。

语法：

invoke( methodName, args );

参数：

methodName: 它是我们想要调用的方法的名称。
args ：它是方法的参数值。

返回值： 调用invoke后返回一个值。

安装和运行Ember.js的步骤：

要运行以下示例，您需要一个ember项目。首先需要安装ember-cli。在终端中写下以下代码：

npm install ember-cli

现在你可以通过输入以下代码来创建项目：

ember new <project-name> --lang en

要启动服务器，请键入:

ember serve

示例1

输入以下代码以生成此示例的路线：

ember generate route invoke1

app/routes/invoke1.js

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); 
    } 
}

app/controllers/invoke1.js

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')); 
        }, 
    }, 
});

app/templates/invoke1.hbs

{{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}}

输出: 访问 localhost:4200/invoke1 查看输出结果

Ember.js EmberArray invoke()方法

示例2

输入以下代码以生成此示例的路由：

ember generate route invoke2

app/routes/invoke2.js

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); 
    } 
}

app/controllers/invoke2.js

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

app/templates/invoke2.hbs

{{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}}

输出： 访问 localhost:4200/invoke2 查看输出

Ember.js EmberArray invoke()方法