Действия контроллера Ember.js Свойство
Ember.js — это среда JavaScript с открытым исходным кодом, используемая для разработки крупных клиентских веб-приложений, основанная на архитектуре Model-View-Controller (MVC). Ember.js — один из наиболее широко используемых фреймворков интерфейсных приложений. Это сделано для ускорения разработки и повышения производительности. В настоящее время он используется большим количеством веб-сайтов, включая Square, Discourse, Groupon, Linked In, Live Nation, Twitch и Chipotle.
Метод action() используется для создания функции, которая будет вызываться, когда соответствующее действие запускается из шаблонов, а текущий маршрут этого приложения является этим маршрутом.
Синтаксис:
action:{ // functions };
Параметры:
- функции: это функции, которые вызываются, когда соответствующее действие запускается из шаблонов.
Шаги по установке и запуску Ember.js:
Шаг 1: Для запуска следующих примеров вам понадобится проект ember. Чтобы создать его, вам нужно сначала установить ember-cli. Напишите в терминале следующий код:
npm install ember-cli
Шаг 2: Теперь вы можете создать проект, введя следующий фрагмент кода:
ember new <project-name> --lang en
Чтобы запустить сервер, введите:
ember serve
Пример 1. Введите следующий код, чтобы сгенерировать маршрут для этого примера:
ember generate route action1
приложение/контроллеры/action1.js
Javascript
import Controller from "@ember/controller" ; import { action, find } from "@ember/object" ; import Ember from "ember" let Student = Ember.Object.extend({ // These will be supplied by `create` firstName: null , lastName: null , fullName: Ember.computed( "firstName" , "lastName" , function () { return `${ this .get( "firstName" )} ${ this .get( "lastName" )}`; }), Changed: Ember.observer( "fullName" , function () { console.log(`fullName changed to: ${ this .get( "fullName" )}`); }) }); export default class Array2Controller extends Controller { stu2 = Student.create({ firstName: "Kasual" , lastName: "Singh" , Id: "stu2" }); stu0 = Student.create({ firstName: "Yehuda" , lastName: "Katz" , Id: "stu0" }); stu1 = Student.create({ firstName: "Yella" , lastName: "melo" , Id: "stu1" }); stu3 = Student.create({ firstName: "Pokhu" , lastName: "Verma" , Id: "stu3" }); value = this .stu3.get( "Id" ); students = [ this .stu0, this .stu1, this .stu2, this .stu3] @action print(data1, data2) { let ans = this .students.findBy( "Id" , data1) ans.set( "firstName" , data2) } } |
приложение/шаблоны/action1.hbs
HTML
< table > < tr > < th >Name</ th > < th >Id</ th > </ tr > {{#each this.students as |detail|}} < tr > < td >{{detail.fullName}}</ td > < td >{{get detail "Id"}}</ td > </ tr > {{/each}} </ table > < br /> {{input value=this.value}} {{input value=this.value2}} < br /> < input type = "button" id = "set-code" value = "Update Student details" {{action "print" this.value this.value2}} /> |
Выход:
Пример 2. Введите следующий код, чтобы сгенерировать маршрут для этого примера:
ember generate route action2
приложение/маршруты/action2.js
Javascript
import Route from "@ember/routing/route" ; export default class StudentsRoute extends Route { p1 = [ "Digital Camera" , "Jugs, cups & straws" , "Balloons" , "Scissors" , "Cold Drink" , "Table" , ]; model() { return this .p1; } setupController(controller, model) { super .setupController(controller, model); controller.set( "p1" , this .p1); } } |
приложение/контроллеры/action2.js
Javascript
import Ember from "ember" ; export default Ember.Controller.extend({ value: "value" , init() { this ._super(...arguments); this .addObserver( "value" , this , "Change" ); }, Change() { console.log( "value changed" ); }, actions: { remove(data) { this .p1.set( "[]" , this .p1.without(data)); }, print() { let ans = this .p1.get( "[]" ); alert(ans.join( "
" )) }, }, }); |
приложение/шаблоны/action2.hbs
HTML
< ul > < h3 >List is : </ h3 > {{#each @model as |party|}} < li >{{party}}</ li > {{/each}} </ ul > < br /> {{input value=this.value}} < br /> < input type = "button" id = "check-atIndex" value = "Remove" {{action "remove" this.value}} /> < br />< br /> < input type = "button" id = "print-item" value = "Print All Items" {{action "print" this.value}} /> |
Выход:
Ссылка: https://api.emberjs.com/ember/4.6/classes/Controller/properties/actions?anchor=actions