Метод Ember.js MutableArray popObject()
Ember.js — это среда JavaScript с открытым исходным кодом, используемая для разработки крупных клиентских веб-приложений, основанная на архитектуре Model-View-Controller (MVC). Ember.js — один из наиболее широко используемых фреймворков интерфейсных приложений. Это сделано для ускорения разработки и повышения производительности. В настоящее время он используется большим количеством веб-сайтов, включая Square, Discourse, Groupon, Linked In, Live Nation, Twitch и Chipotle.
Метод popObject() используется для извлечения объектов из массива.
Синтаксис:
popObject()
Возвращает: объект выскочил
Для запуска следующих примеров вам понадобится проект ember. Чтобы создать его, вам нужно сначала установить ember-cli. Напишите в терминале следующий код:
npm install ember-cli
Теперь вы можете создать проект, введя следующий фрагмент кода:
ember new <project-name> --lang en
Чтобы запустить сервер, введите:
ember serve
Пример 1. Введите следующий код, чтобы сгенерировать маршрут для этого примера:
ember generate route notepad
приложение/маршруты/notepad.js
Javascript
import Route from "@ember/routing/route"; export default class NotepadRoute extends Route { items = ["Bread", "Facewash", "Egg", "Pen", "Medicine"]; model() { return this.items; } setupController(controller, model) { this._super(controller, model); controller.set("items", this.items); }} |
приложение/контроллеры/notepad.js
Javascript
import Ember from "ember";import { popObject } from "@ember/array"; export default Ember.Controller.extend({ actions: { removeItem() { if (this.items.length == 0) alert("Item List is Empty"); this.items.popObject(); } }}) |
приложение/шаблон/notepad.hbs
HTML
{{page-title "Notepad"}} <h2>Your Items</h2> <ul> {{#each @model as |i|}} <li>{{i}}</li> {{/each}}</ul> <br/><br/> <div> <input type="button" id="remove-item" value="Remove Item" {{action "removeItem"}}/></div> {{outlet}} |
Вывод: посетите localhost:4200/notepad для просмотра вывода.
Пример 2. Введите следующий код, чтобы сгенерировать маршрут для этого примера:
ember generate route richest-people
приложение/маршруты/богатые-люди.js
Javascript
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", "jeff Bezos", "Bill gates", "gautam adani and family", "Larry Page", "Warren Buffet", "larry Ellison", "mukesh ambani", "sergey brin"]; num = 10; init() { this.richestPeople = this.richestPeople.map(classify); } model() { this.init(); return this.richestPeople; } setupController(controller, model) { this._super(controller, model); controller.set("num", this.num); controller.set("richestPeople",this.richestPeople) }} |
приложение/контроллеры/самые богатые люди.js
Javascript
import Ember from "ember";import { popObject } from "@ember/array"; export default Ember.Controller.extend({ actions: { set(n) { this.num = parseInt(n); while (this.richestPeople.length > this.num) { this.richestPeople.popObject(); } } }}) |
приложение/шаблон/богатейшие-люди.hbs
HTML
{{page-title "Richest People"}} <div> <label>Enter Value: </label> {{input value=this.num}}</div><div> <input type="button" id="fetch" value="Fetch" {{action "set" this.num}}/></div><br/><br/> <h2>Top {{this.num}} Richest People in the World</h2><ul> {{#each @model as |rich-person|}} <li>{{rich-person}}</li> {{/each}}</ul> {{outlet}} |
Вывод: посетите localhost:4200/richest-people для просмотра вывода.
Ссылка: https://api.emberjs.com/ember/4.4/classes/MutableArray/methods