Метод Ember.js MutableArray pushObject()
Ember.js — это среда JavaScript с открытым исходным кодом, используемая для разработки крупных клиентских веб-приложений, основанная на архитектуре Model-View-Controller (MVC). Ember.js — один из наиболее широко используемых фреймворков интерфейсных приложений. Это сделано для ускорения разработки и повышения производительности. В настоящее время он используется большим количеством веб-сайтов, включая Square, Discourse, Groupon, Linked In, Live Nation, Twitch и Chipotle.
Метод pushObject() используется для помещения объекта в массив.
Синтаксис:
pushObject(obj)
Параметры:
- obj (объект): объект для нажатия
Возвращает: объект, который был передан в качестве параметра
Для запуска следующих примеров вам понадобится проект ember. Чтобы создать его, вам нужно сначала установить ember-cli. Напишите в терминале следующий код:
npm install ember-cli
Теперь вы можете создать проект, введя следующий фрагмент кода:
ember new <project-name> --lang en
Чтобы запустить сервер, введите:
ember serve
Пример 1. Введите следующий код, чтобы сгенерировать маршрут для этого примера:
ember сгенерировать блокнот маршрута
приложение/маршруты/notepad.js
Javascript
import Route from "@ember/routing/route"; export default class NotepadRoute extends Route { item; items = ["Bread", "Facewash"]; model() { return this.items; } setupController(controller, model) { this._super(controller, model); controller.set("items", this.items); }} |
приложение/контроллеры/notepad.js
Javascript
import Ember from "ember";import { pushObject } from "@ember/array"; export default Ember.Controller.extend({ actions: { addItem(item) { console.log(item); this.items.pushObject(item); } }}) |
приложение/шаблон/notepad.hbs
HTML
{{page-title "Notepad"}} <h2>Your Items</h2> <div> <label>Enter Item: </label> {{input value=this.item}}</div><div> <input type="button" id="add-item" value="Add Item" {{action "addItem" this.item}}/></div><br/><br/> <ul> {{#each @model as |i|}} <li>{{i}}</li> {{/each}}</ul> {{outlet}} |
Вывод: посетите localhost:4200/notepad для просмотра вывода.
Пример 2. Введите следующий код, чтобы сгенерировать маршрут для этого примера:
ember generate route languages
приложение/маршруты/languages.js
Javascript
import Route from "@ember/routing/route";import { classify, w } from "@ember/string";import { pushObject } from "@ember/array"; 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.pushObject(obj); } } model() { this.initLanguages(); return this.languages; }} |
приложение/шаблон/languages.hbs
Javascript
{{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}} |
Вывод: посетите localhost:4200/languages, чтобы просмотреть вывод.
Ссылка: https://api.emberjs.com/ember/4.4/classes/MutableArray/methods