Método Ember.js String camelize()

Ember.js es un marco JavaScript de código abierto que se utiliza 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 camelize() se usa para producir una versión camelizada de la string dada.

Sintaxis:

camelize(str)

Parámetros:

• str(string): La string a camelizar.

Valor devuelto: La string camelizada.

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

import Route from '@ember/routing/route';
import { camelize } from '@ember/string';
  
export default class RichestPeopleRoute extends Route {
  richestPeople = [
    'elon Musk',
    'bernard Arnault and family',
    'jeff Bezos',
    'Bill gates',
    'gautam adani and family',
    'Larry Page',
    'Warren Buffet',
    'larry Ellison',
    'mukesh ambani',
    'sergey brin',
  ];
  model() {
    return this.richestPeople.map(camelize);
  }
}

{{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

import Route from '@ember/routing/route';
import { camelize } 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 = [];
        for(let i = 0; i<this.name.length; i++) {
            let obj = new Object();
            obj['name'] = camelize(this.name[i]);
            obj['num'] = this.num[i];
            this.languages.push(obj);
        }
    }
    model() {
        this.initLanguages();
        return this.languages;
    }
}

{{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