Ember.js Свойство содержимого ArrayProxy
Ember.js — это среда JavaScript с открытым исходным кодом, используемая для разработки крупных клиентских веб-приложений, основанная на архитектуре Model-View-Controller (MVC). Ember.js — один из наиболее широко используемых фреймворков интерфейсных приложений. Это сделано для ускорения разработки и повышения производительности. В настоящее время он используется большим количеством веб-сайтов, включая Square, Discourse, Groupon, Linked In, Live Nation, Twitch и Chipotle.
Свойство содержимого используется для пересылки свойства объекта.
Синтаксис:
ArrayProxy.create({content: value})
Характеристики:
- значение: это значение, которое мы хотим установить для контента.
Шаги по установке и запуску Ember.js:
Шаг 1: Для запуска следующих примеров вам понадобится проект ember. Чтобы создать его, вам нужно сначала установить ember-cli. Напишите в терминале следующий код:
npm install ember-cli
Шаг 2: Теперь вы можете создать проект, введя следующий фрагмент кода:
ember new <project-name> --lang en
Чтобы запустить сервер, введите:
ember serve
Пример 1. Введите следующий код, чтобы сгенерировать маршрут для этого примера:
ember generate route test1
приложение/маршруты/test1.js
Javascript
import Route from "@ember/routing/route";import EmberObject from "@ember/object";import Ember from "ember"; let List = Ember.ArrayProxy.extend({}); export default class FruitsRoute extends Route { temp = [ "python", "javascript", "java", "Php", "Django", "Angular", "c++", "c", ]; list = List.create({ content: this.temp }); item2; item3; model() { return this.list; } setupController(controller, model) { super.setupController(controller, model); controller.set("fruits", this.fruits); controller.set("item1", this.item1); controller.set("item2", this.item2); controller.set("list", this.list); controller.set("temp", this.temp); }} |
приложение/контроллеры/test1.js
Javascript
import Ember from "ember";import { addObject, isAny, isEvery } from "@ember/array";import EmberObject from "@ember/object"; export default Ember.Controller.extend({ actions: { print() { let temp = this.list.content; alert(temp.join("
")); }, find(data) { alert(this.list.objectAtContent(data)); }, },}); |
приложение/шаблоны/test1.hbs
HTML
{{page-title "Example"}}<h3>Here is a list of Languages: </h3><table> {{#each @model as |item|}} <tr> <td>{{item}}</td> </tr> {{/each}}</table><br /><div> <label>Enter Index: </label> {{input value=this.item3}}</div><br /><div> <input type="button" id="print-item" value="Print items At" {{action "find" this.item3}} /></div><br /><br /><div> <input type="button" id="print-item" value="Print All items" {{action "print"}} /></div>{{outlet}} |
Выход:
Пример 2. Введите следующий код, чтобы сгенерировать маршрут для этого примера:
ember generate route test2
приложение/маршруты/test2.js
Javascript
import Route from "@ember/routing/route";import { A } from "@ember/array";import ArrayProxy from "@ember/array/proxy"; export default class List2Route extends Route { list = ArrayProxy.create({ content: A([ "Oxygen", "Source Code", "Infine", "Tenet", "SpiderHead", "The Thing", "A Quiet Place", "The Invisible Man", "Looper", "Ad Astra", ]) }); model() { return this.list; } setupController(controller, model) { super.setupController(controller, model); controller.set("list", this.list); }} |
приложение/контроллеры/test2.js
Javascript
import Controller from "@ember/controller";import { action } from "@ember/object"; export default class List2Controller extends Controller { @action print() { let temp = this.list.content; alert(temp.join("
")); } @action show(data) { alert(this.list.objectAtContent(data)); } } |
приложение/шаблоны/test2.hbs
HTML
{{page-title "Example"}}<h3>Here is a list of eatables: </h3><table> {{#each @model as |item|}} <tr> <td>{{item}}</td> </tr> {{/each}}</table><br /><div> <label>Enter Index: </label> {{input value=this.item3}}</div><br /><div> <input type="button" id="print-item" value="Item At idex" {{action "show" this.item3}} /></div><br /><br /><div> <input type="button" id="print-item" value="Print All items" {{action "print"}} /></div>{{outlet}} |
Выход:
Ссылка: https://api.emberjs.com/ember/4.6/classes/ArrayProxy/properties/content?anchor=content