Embeer.js MutableArray mapBy()用法及代码示例

Ember.js 是一个开源 JavaScript 框架，用于开发基于 Model-View-Controller (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

应用程序/路线/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; 
  } 
}

应用程序/模板/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 查看输出

映射依据

示例 2：键入以下代码以生成本示例的路由：

ember generate route mapBy2

应用程序/路线/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); 
  } 
}

应用程序/控制器/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')); 
    }, 
  }, 
});

应用程序/模板/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}}

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

可能由

参考：https://api.emberjs.com/ember/4.4/classes/MutableArray/methods/mapBy?anchor=mapBy

相关用法

注：本文由纯净天空筛选整理自satyam00so大神的英文原创作品 Ember.js MutableArray mapBy() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。