Método Ember.js String w()

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *