Ember.js MutableArray mapBy() 方法

Ember.js 是一种开源的JavaScript框架，用于开发基于模型-视图-控制器(MVC)架构的大型客户端Web应用程序。Ember.js是最常用的前端应用程序框架之一。它旨在加快开发速度并提高生产力。目前，它被许多网站使用，包括Square、Discourse、Groupon、Linked In、Live Nation、Twitch和Chipotle。

mapBy() 方法用于获取列表中所有项目的指定属性的值。

语法：

mapBy( key );

参数：

Key： 这是我们想要的属性的名称。

返回值： 返回映射数组。

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

npm install ember-cli

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

ember new <project-name> --lang en

开始服务器，输入：

ember server

示例1

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

ember generate route mapBy1

app/routes/mapBy1.js

import Route from '@ember/routing/route'; 
import { sortBy } from '@ember/array'; 
  
export default class RichestPeopleRoute extends Route { 
  richestPeople = [ 
    { name: 'mukesh ambani', 'net-worth': 90.7 }, 
    { name: 'jeff Bezos', 'net-worth': 148.1 }, 
    { name: 'Warren Buffet', 'net-worth': 99.3 }, 
    { name: 'Bill gates', 'net-worth': 104.7 }, 
    { name: 'elon Musk', 'net-worth': 253.4 }, 
    { name: 'gautam adani and family',  
             'net-worth': 115.8 }, 
    { name: 'Larry Page', 'net-worth': 93.4 }, 
    { name: 'larryEllison', 'net-worth': 103.3 }, 
    { name: 'sergeyBrin', 'net-worth': 89.9 }, 
    { name: 'bernard Arnault and family',  
            'net-worth': 157.1 }, 
  ]; 
  model() { 
    this.richestPeople = this.richestPeople.mapBy('name    '); 
    return this.richestPeople; 
  } 
}

app/templates/mapBy1.hbs

{{page-title "Richest People"}} 
  
<h2>Richest Person in the World</h2> 
  
<table style="border: 2px solid black;padding: 30px;"> 
    <tr> 
        <th>Name</th> 
    </tr> 
    {{#each @model as |person|}} 
    <tr> 
        <td>{{person}}</td> 
    </tr> 
    {{/each}} 
</table> 
  
{{outlet}}

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

Ember.js MutableArray mapBy() 方法

示例2

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

ember generate route mapBy2

app/routes/mapBy2.js

import Route from '@ember/routing/route'; 
import { classify, w } from '@ember/string'; 
import { pushObject, sortBy } from '@ember/array'; 
  
export default class LanguagesRoute extends Route { 
  name = `Hindi Bengali Marathi Telugu Tamil 
          Gujarati Urdu Kannada`; 
  num = `57.09 8.85 8.18 7.77 6.36 4.99 5.18 4.84`; 
  
  languages = []; 
  
  initLanguages() { 
    this.languages = []; 
    this.name = w(this.name); 
    this.num = w(this.num); 
    for (let i = 0; i < this.name.length; i++) { 
      let obj = new Object(); 
      obj['name'] = classify(this.name[i]); 
      obj['num'] = this.num[i]; 
      this.languages.pushObject(obj); 
    } 
  } 
  
  model() { 
    this.initLanguages(); 
    return this.languages; 
  } 
  setupController(controller, model) { 
    super.setupController(controller, model); 
    controller.set('languages', this.languages); 
  } 
}

app/controllers/mapBy2.js

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

app/templates/mapBy2.hbs

{{page-title "Languages"}} 
  
<h2>Spoken Languages in the World</h2> 
<table style="border: 2px solid black;padding: 30px;"> 
    <tr> 
        <th>Language</th> 
        <th>Native Speakers (percentage)</th> 
    </tr> 
    {{#each @model as |language|}} 
    <tr> 
        <td>{{language.name}}</td> 
        <td>{{language.num}}</td> 
    </tr> 
    {{/each}} 
</table> 
  
<input type="button"
    id="navtive"
    value="Print only Natives"
    {{action 'PrintNatives' this.languages}} /> 
{{outlet}}