当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


Embeer.js ArrayProxy isAny()用法及代码示例


Ember.js 是一个开源 JavaScript 框架,用于开发基于 Model-View-Controller (MVC) 架构的大型客户端 Web 应用程序。 Ember.js是使用最广泛的前端应用框架之一。它的目的是加速开发并提高生产力。目前,它被大量网站使用,包括 Square、Discourse、Groupon、Linked In、Live Nation、Twitch 和 Chipotle。

isAny() 方法用于检查数组中是否存在任何项目的属性值。

用法:

isAny( key, value );

参数:

  • key: 它是我们想要其值的属性的名称。
  • value: 它是针对键测试的属性的值。

返回值:布尔值。

要运行以下示例,您需要有一个 ember 项目。要创建一个,您需要先安装ember-cli。在终端中写入以下代码:

npm install ember-cli

现在您可以通过输入以下代码来创建项目:

ember new <project-name> --lang en

要启动服务器,请键入:

ember serve

示例 1:键入以下代码以生成本示例的路由:

ember generate route isAny1

应用程序/路线/isAny1.js


import Route from "@ember/routing/route"; 
  
export default class DetailsRoute extends Route { 
    details = [ 
        { 
            name: "Anubhav", 
            mobile: "1298119967", 
            city: "Patna", 
            country: "India", 
            gender: "M", 
            zipCode: "800020", 
        }, 
        { 
            name: "Yogesh", 
            mobile: "1234567890", 
            city: "Raipur", 
            country: "India", 
            gender: "M", 
            zipCode: "402001", 
        }, 
        { 
            name: "Satyam", 
            mobile: "2222222222", 
            city: "Delhi", 
            country: "India", 
            gender: "M", 
            zipCode: "110012", 
        }, 
        { 
            name: "Shivam", 
            mobile: "1122113322", 
            city: "Patna", 
            country: "India", 
            gender: "M", 
            zipCode: "530068", 
        }, 
        { 
            name: "Ayushi", 
            mobile: "2244668800", 
            city: "Jaipur", 
            country: "India", 
            gender: "F", 
            zipCode: "302001", 
        }, 
    ]; 
  
    city; 
    start; 
    end; 
    model() { 
        return this.details; 
    } 
    setupController(controller, model) { 
        super.setupController(controller, model); 
        controller.set("details", this.details); 
        controller.set("city", this.city); 
        controller.set("start", this.start); 
        controller.set("end", this.end); 
    } 
}

应用程序/控制器/isAny1.js


import Ember from "ember"; 
import { isAny } 
    from "@ember/array"; 
  
export default Ember.Controller.extend({ 
    actions: { 
        checkCity(city) { 
            let res = this.details.isAny('city', city); 
            alert(res  
                ? `Person from ${city} Present`  
                : `No Person from ${city} present`); 
        }, 
        checkName(name) { 
            let res = this.details.isAny('name', name); 
            alert(res  
                ? `${name} is in list`  
                : `No Person of name ${name} present`); 
        }, 
        checkFemale() { 
            let res = this.details.isAny('gender', 'F'); 
            alert(res  
                ? `Female employee present in List`  
                : `No Female present`); 
        }, 
    }, 
});

应用程序/模板/isAny1.hbs


{ { page - title "isAny" } } 
<h3>List of People: </h3> 
<br /><br /> 
<table> 
    <tr> 
        <th>Name</th> 
        <th>Gender</th> 
        <th>Mobile</th> 
        <th>City</th> 
        <th>Country</th> 
        <th>Zip Code</th> 
    </tr> 
    {{#each @model as |detail|}} 
    <tr> 
        <td>{{detail.name}}</td> 
        <td>{{detail.gender}}</td> 
        <td>{{detail.mobile}}</td> 
        <td>{{detail.city}}</td> 
        <td>{{detail.country}}</td> 
        <td>{{detail.zipCode}}</td> 
    </tr> 
    {{/each}} 
</table> 
<br /><br /> 
<div> 
    <label>Enter City: </label> 
    {{input value=this.city}} 
</div> 
  
<div> 
    <input type="button" id="check-city" 
    value="Check SomeOne from city" 
    {{action 'checkCity' this.city}} /> 
</div> 
<br /><br /> 
<div> 
    <label>Enter Name: </label> 
    {{input value=this.name}} 
</div> 
<div> 
    <input type="button" id="check-name" 
    value="Check SomeOne by Name" 
    {{action 'checkName' this.name}} /> 
</div> 
<br /> 
<input type="button" id="get-female" 
    value="Female Present in list" 
    {{action 'checkFemale' }} />

输出:访问 localhost:4200/isAny1 查看输出:

Ember.js ArrayProxy isAny 方法

示例 2:键入以下代码以生成本示例的路由:

ember generate route isAny2

应用程序/路线/isAny2.js


import Route from '@ember/routing/route'; 
import { } from '@ember/array'; 
  
export default class FruitsRoute extends Route { 
    fruits = [ 
        { 
            'name': 'Lady Finger', 
            'isFruit': false, 
            'color': 'green'
        }, 
        { 
            'name': 'Brinjal', 
            'isFruit': false, 
            'color': 'purple'
        }, 
        { 
            'name': 'Apple', 
            'isFruit': true, 
            'color': 'red'
        }, 
        { 
            'name': 'Grapes', 
            'isFruit': true, 
            'color': 'green'
        }, 
        { 
            'name': 'Mango', 
            'isFruit': true, 
            'color': 'yellow'
        }, 
        { 
            'name': 'Watermelon', 
            'isFruit': true, 
            'color': 'red'
        }, 
        { 
            'name': 'Orange', 
            'isFruit': true, 
            'color': 'orange'
        } 
    ]; 
    model() { 
        return this.fruits; 
    } 
    setupController(controller, model) { 
        super.setupController(controller, model); 
        controller.set('fruits', this.fruits); 
    } 
}

应用程序/控制器/isAny2.js


import Ember from "ember"; 
import { isAny, isEvery } from "@ember/array"; 
  
export default Ember.Controller.extend({ 
    actions: { 
        anyFruit() { 
  
            let ans = this.fruits.isAny("isFruit") 
            alert(ans  
                ? `List contains SomeFruit`  
                : "List doesn't contains any Fruits"); 
        }, 
        allFruit() { 
            let ans = this.fruits.isEvery("isFruit"); 
            alert(ans  
                ? `List contains Only Fruits`  
                : "List doesn't contains Only Fruits"); 
        }, 
        remove() { 
            this.fruits.clear(); 
        } 
    }, 
});

应用程序/模板/isAny2.hbs


{{page-title "isAny"}} 
<h3>Here is a list of eatables: </h3> 
<ul> 
    {{#each @model as |eatable|}} 
    <li> 
        {{eatable.name}} 
    </li> 
    {{/each}} 
</ul> 
<br /><br /> 
<input type="button" id="fruit-any" 
    value="List Contains Any Fruit?" 
    {{action 'anyFruit' }} /> 
<br /><br /> 
<input type="button" id="fruit-all" 
    value="List Contains Only Fruit?" 
    {{action 'allFruit' }} /> 
  
<br /><br /> 
<input type="button" id="remove-Fruits" 
    value="Clear" 
    {{action 'remove' }} /> 
{{outlet}}

输出:访问 localhost:4200/isAny2 查看输出

Ember.js ArrayProxy isAny 方法

参考:https://api.emberjs.com/ember/4.6/classes/ArrayProxy/methods/isAny?anchor=isAny



相关用法


注:本文由纯净天空筛选整理自satyam00so大神的英文原创作品 Ember.js ArrayProxy isAny() Method。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。