Ember.js es un marco JavaScript de código abierto utilizado para desarrollar grandes aplicaciones web del lado del cliente que se basa en la arquitectura Model-View-Controller (MVC). Ember.js es uno de los marcos de aplicaciones front-end más utilizados, ya que está diseñado para acelerar el desarrollo y aumentar la productividad. Actualmente, es utilizado por una gran cantidad de sitios web, incluidos Square, Discourse, Groupon, Linked In, Live Nation, Twitch y Chipotle.
El método w() se usa para dividir la string dada.
Sintaxis:
w(str)
Parámetros:
- str(string): La string a dividir.
Valor de retorno: la array que contiene strings.
Para ejecutar los siguientes ejemplos, necesitará tener un proyecto de Ember con usted. Para crear uno, primero deberá instalar ember-cli. Escribe el siguiente código en la terminal:
npm install ember-cli
Ahora puede crear el proyecto escribiendo el siguiente código:
ember new <project-name> --lang en
Para iniciar el servidor, escriba:
ember serve
Ejemplo 1: Escriba el siguiente código para generar la ruta para este ejemplo:
ember generate route richest-people
app/routes/richest-people.js
import Route from '@ember/routing/route'; import { classify, w } from '@ember/string'; export default class RichestPeopleRoute extends Route { richestPeople = 'elon_Musk bernard_Arnault_and_family jeffBezos BillGates gautam_adani_and_family LarryPage WarrenBuffet larryEllison mukesh_ambani sergeyBrin'; model() { this.richestPeople = w(this.richestPeople); return this.richestPeople.map(classify); } }
app/template/richest-people.hbs
{{page-title "Richest People"}} <h2>Top 10 Richest People in the World</h2> <ul> {{#each @model as |rich-person|}} <li>{{rich-person}}</li> {{/each}} </ul> {{outlet}}
Salida: Visite localhost:4200/richest-people para ver la salida
Ejemplo 2: Escriba el siguiente código para generar la ruta para este ejemplo:
ember generate route languages
app/routes/languages.js
import Route from '@ember/routing/route'; import { classify, w } from '@ember/string'; export default class LanguagesRoute extends Route { name = 'mandarin_Chinese spanish english Hindi bengali Portuguese russian japanese western_punjabi yueChinese'; num = '929.0 474.7 372.9 343.9 233.7 232.4 154.0 125.3 92.7 85.2' 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.push(obj); } } model() { this.initLanguages(); return this.languages; } }
app/template/languages.hbs
{{page-title "Languages"}} <h2>Most Spoken Languages in the World</h2> <table style="border: 2px solid black;padding: 30px;"> <tr> <th>Language</th> <th>Native Speakers (millions)</th> </tr> {{#each @model as |language|}} <tr> <td>{{language.name}}</td> <td>{{language.num}}</td> </tr> {{/each}} </table> {{outlet}}
Salida: Visite localhost:4200/languages para ver la salida
Referencia: https://api.emberjs.com/ember/release/classes/String
Publicación traducida automáticamente
Artículo escrito por aayushmohansinha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA