Ember.js ArrayProxy includes() Method
Ember.js is an open-source JavaScript framework used for developing large client-side web applications which is based on Model-View-Controller (MVC) architecture. Ember.js is one of the most widely used front-end application frameworks. It is made to speed up development and increase productivity. Currently, it is utilized by a large number of websites, including Square, Discourse, Groupon, Linked In, Live Nation, Twitch, and Chipotle.
The includes() method is used to determine if the array contains the passed object.
Syntax:
includes( object, startAt );
Parameters:
- object: It is the object which presence we are checking in the array.
- startAt: It is the location from which we search for the object.
Return Value: true if the object is found in the array.
Steps to Install and Run Ember.js:
To run the following examples you will need to have an ember project with you. To create one, you will need to install ember-cli first. Write the below code in the terminal:
npm install ember-cli
Now you can create the project by typing in the following piece of code:
ember new <project-name> --lang en
To start the server, type:
ember serve
Example 1: Type the following code to generate the route for this example:
ember generate route include1
app/routes/include1.js
import Route from '@ember/routing/route' ; export default class ListRoute extends Route { list = [1, 2, 3, 5, 6, 7, 8, 9]; item; idx; model() { return this .list; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'list' , this .list); controller.set( 'item' , this .item); controller.set( 'idx' , this .idx); } } |
app/controllers/include1.js
import Ember from 'ember' ; import { clear, insertAt, indexOf, lastIndexOf, includes } from '@ember/array' ; export default Ember.Controller.extend({ actions: { insertItem(item) { this .list.addObject(item); }, clearList() { this .list.clear(); }, contains(item) { let res = this .list.includes(item); alert(`The list ${res ? '' : 'does not' } contains ${item}`); }, }, }); |
app/templates/include1.hbs
{{page-title "include" }} <h3>Here is a list of Items: </h3> <ul> {{ #each @model as |i|}} <li>{{i}}</li> {{/each}} </ul> <br/> <div> <label>Enter Item: </label> {{input value= this .item2}} </div> <div> <input type= "button" id= "contains-item" value= "Contains?" {{action "contains" this .item}} /> </div> <br /> <div> <label>Enter Item: </label> {{input value= this .item}} </div> <div> <input type= "button" id= "insert-item" value= "Insert Item" {{action "insertItem" this .item }} /> </div> <br /> <input type= "button" id= "clear-items" value= "Clear" {{action "clearList" }} /> {{outlet}} |
Output: Visit localhost:4200/include1 to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route include2
app/routes/include.js
import Route from '@ember/routing/route' ; export default class PartyRoute extends Route { partyItems = [ 'Oxygen' , 'Source Code' , 'Infine' , 'Tenet' , 'SpiderHead' , 'The Thing' , 'A Quiet Place' , 'The Invisible Man' , 'Looper' , 'Ad Astra' ]; temp = [ 'Shutter Island' , 'Matrix' , 'Avatar' , 'Fantastic Beast' , 'Avengers' , 'Fantastic four' , 'Hult' , 'Superman' , 'Spiderman' , 'The Batman' ]; item; idx; model() { return this .partyItems; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'partyItems' , this .partyItems); controller.set( 'item' , this .item); controller.set( 'idx' , this .idx); controller.set( 'temp' , this .temp); } } |
app/controllers/include2.js
import Ember from 'ember' ; import { insertAt, indexOf, lastIndexOf, includes } from '@ember/array' ; export default Ember.Controller.extend({ actions: { insertItem(item) { this .partyItems.pushObject( item); }, push_item(data) { this .partyItems.pushObjects(data); }, contains(item) { let res = this .partyItems.includes(item); alert(`The partyItems ${res ? '' : 'does not' } contains ${item}`); }, }, }); |
app/templates/include2.hbs
{{page-title "Party" }} <h3>Here is a list of items: </h3> <ul> {{ #each @model as |party|}} <li>{{party}}</li> {{/each}} </ul> <br /><br /> <div> <label>Enter Item: </label> {{input value= this .item}} </div> <div> <input type= "button" id= "insert-item" value= "Insert Item" {{action "insertItem" this .item}} /> </div> <br /> <div> <label>Enter Item: </label> {{input value= this .item2}} </div> <div> <input type= "button" id= "contains-item" value= "Contains?" {{action "contains" this .item2}} /> </div> <br /> <input type= "button" id= "contains-item" value= "Add Movies" {{action "push_item" this .temp}} /> {{outlet}} |
Output: Visit localhost:4200/include2 to view the output
Reference: https://api.emberjs.com/ember/2.14/classes/Ember.Array/methods/include?anchor=include
Contact Us