Ember.js MutableArray invoke() 方法

Ember.js 是一款开源的JavaScript框架，用于开发基于Model-View-Controller（MVC）架构的大型客户端Web应用程序。Ember.js是最广泛使用的前端应用框架之一。它旨在加快开发速度并提高生产力。目前，许多网站都在使用它，包括Square、Discourse、Groupon、Linked In、Live Nation、Twitch和Chipotle。

invoke() 方法 用于调用接收器中实现了该方法的每个对象上的传递方法。

语法：

invoke( methodName, args );

属性:

methodName: 这是我们调用的方法的名称。
args: 这是我们想要传递给该方法的可选参数。

返回值: 它返回了调用invoke方法的返回值。

要运行以下示例，您需要有一个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 Person { 
    name = null; 
    age = null; 
    country = null; 
    constructor(name, age, country) { 
        this.name = name; 
        this.age = age; 
        this.country = country; 
    } 
  
    greet(prefix = 'Hello') { 
        return ` ${prefix}$ {this.name}`; 
    } 
} 
export default class 
    RichestPeopleRoute extends Route { 
    people = [ 
        new Person('Joe', 26, 'singapore'), 
        new Person('Matt', 29, 'sweden'), 
        new Person('Ram', 21, 'India'), 
        new Person('carl', 23, 'japan'), 
    ]; 
    model() { 
        return this.people; 
    } 
    setupController(controller, model) { 
        super.setupController(controller, model); 
        controller.set('people', this.people); 
    } 
}

app/controllers/invoke1.js

import Ember from 'ember'; 
import { mapBy } from '@ember/array'; 
  
export default Ember.Controller.extend({ 
    actions: { 
        invoke_greet() { 
  
            let ans = this.people. 
                invoke('greet'); 
  
            alert(ans.join('\n')); 
        }, 
    }, 
});

app/templates/invoke1.hbs

{ { page - title "invoke" } } 
  
<h2>Person in the List</h2> 
  
<table style="border:  
       2px solid black; 
       padding: 30px;"> 
    <tr> 
        <th>Name</th> 
        <th>age</th> 
        <th>country</th> 
    </tr> 
    {{#each @model as |person|}} 
    <tr> 
        <td>{{person.name}}</td> 
        <td>{{person.age}}</td> 
        <td>{{person.country}}</td> 
          
    </tr> 
    {{/each}} 
</table> 
<input type="button"
    id="greet"
    value="Greet to All"
    {{action 'invoke_greet'}} /> 
  
{ { outlet } }

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

Ember.js MutableArray invoke() 方法

示例2

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

ember generate route invoke2

app/routes/invoke2.js

import Route from '@ember/routing/route'; 
  
class Country { 
    name = null; 
    year = null; 
    constructor(name, year) { 
        this.name = name; 
        this.year = year; 
    } 
  
    Indepedent() { 
        return
        ` ${this.name} become independent in year$ {this.year}`; 
    } 
} 
export default class RichestPeopleRoute  
    extends Route { 
    country = [ 
        new Country('India', 1847), 
        new Country('Brazil', 1822), 
        new Country('Poland', 1918), 
        new Country('Singapore', 1965), 
        new Country('Sudan', 1956), 
    ]; 
    model() { 
        return this.country; 
    } 
    setupController(controller, model) { 
        super.setupController(controller, model); 
        controller.set('country', this.country); 
    } 
}

app/controllers/invoke2.js

import Ember from 'ember'; 
import { mapBy } from '@ember/array'; 
  
export default Ember.Controller.extend({ 
    actions: { 
        invoke_show() { 
  
            let ans = this.country. 
                invoke('Indepedent'); 
  
            alert(ans.join('\n')); 
        }, 
    }, 
});

app/templates/invoke2.hbs

{ { page - title "invoke" } } 
  
<h2>Person in the List</h2> 
  
<table style="border: 
      2px solid black; 
      padding: 30px;"> 
    <tr> 
        <th>Country</th> 
    </tr> 
    {{#each @model as |country|}} 
    <tr> 
        <td>{{country.name}}</td> 
          
    </tr> 
    {{/each}} 
</table> 
<input type="button"
    id="show"
    value="Print Independent"
    {{action 'invoke_show'}} /> 
  
{ { outlet } }

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

Ember.js MutableArray invoke() 方法