Embeer.js ArrayProxy invoke()用法及代碼示例

import Route from '@ember/routing/route'; 
class employee { 
    name = null; 
    city = null; 
    gender = null; 
    zipCode = null; 
    constructor(name, city, gender, zipCode) { 
        this.name = name; 
        this.city = city; 
        this.gender = gender; 
        this.zipCode = zipCode; 
    } 
    show_details() { 
        return `${this.name} is Employee from  
        ${this.city} zipCode ${this.zipCode}`; 
    } 
} 
export default class DetailsRoute extends Route { 
    details = [ 
        new employee('Anubhav', 'Patna', 'M', '800020'), 
        new employee('Satyam', 'Delhi', 'M', '110012'), 
        new employee('Shivam', 'Patna', 'M', '530068'), 
        new employee('Ayushi', 'Jaipur', 'F', '302001'), 
    ]; 
    attr = ['name', 'city', 'gender', 'zipCode']; 
    temp; 
    start; 
    end; 
    model() { 
        return this.details; 
    } 
    setupController(controller, model) { 
        super.setupController(controller, model); 
        controller.set('details', this.details); 
        controller.set('attr', this.attr); 
        controller.set('temp', this.temp); 
        controller.set('temp2', this.temp2); 
        controller.set('end', this.end); 
    } 
}

import Ember from "ember"; 
import { any, slice, reverseObjects, rejectBy } 
    from "@ember/array"; 
  
export default Ember.Controller.extend({ 
    actions: { 
        checkCity(city) { 
            let res = this.details.any((person) => 
                person.city == city); 
            alert(`Person from ${city} is ${res ? "" : 
             'not'} Present`); 
        }, 
        getFemale() { 
            let tempItems = this.details.find((i) 
            => i.gender == "F"); 
            alert(tempItems.name); 
        }, 
        show_Data() { 
            let ans = this.details.invoke('show_details'); 
            alert(ans.join('\n')) 
        }, 
    }, 
}); 

{{page-title "invoke"}} 
<h3>List of People: </h3> 
<br /><br /> 
<table> 
    <tr> 
        <th>Name</th> 
        <th>Gender</th> 
        <th>City</th> 
        <th>Zip Code</th> 
    </tr> 
    {{#each @model as |detail|}} 
        <tr> 
            <td>{{detail.name}}</td> 
            <td>{{detail.gender}}</td> 
            <td>{{detail.city}}</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"
        {{action "checkCity" this.city}} 
    /> 
</div> 
<br /> 
<input 
    type="button"
    id="get-female"
    value="Get Female"
    {{action "getFemale"}} 
/> 
  
<br /><br /> 
<div> 
    <input 
        type="button"
        id="show-details"
        value="Employee's details"
        {{action "show_Data"}} 
    /> 
</div> 
{{outlet}}

import Route from '@ember/routing/route'; 
  
class fruit { 
    name = null; 
    isFruit = null; 
    color = null; 
    constructor(name, isFruit, color) { 
        this.name = name; 
        this.isFruit = isFruit; 
        this.color = color; 
    } 
  
    Show_item() { 
        return `${this.name} is ${this.color} color`; 
  
    } 
} 
  
export default class StudentsRoute extends Route { 
    fruits = [new fruit('Orange', true, 'orange',), 
    new fruit('Apple', true, 'red'), 
    new fruit('Pineapple', true, 'Green-grey'), 
    new fruit('Banana', true, 'yellow'), 
    new fruit('Potato', false, 'brown'), 
    new fruit('Cabbage', false, 'green'), 
    new fruit('Cauli-flower', false, 'green'), 
    ]; 
    temp2; 
    temp; 
    model() { 
        return this.fruits; 
    } 
    setupController(controller, model) { 
        super.setupController(controller, model); 
        controller.set('fruits', this.fruits); 
        controller.set('temp', this.temp); 
        controller.set('temp1', this.temp1); 
        controller.set('temp2', this.temp2); 
    } 
}

import Ember from 'ember'; 
  
export default Ember.Controller.extend({ 
    actions: { 
        find_Data() { 
            let ans = this.fruits.invoke('Show_item'); 
            alert(ans.join('\n')) 
        }, 
        insertItem(data, data1, data2) { 
            let temp = { 
                name: data, 
                isFruit: data1, 
                color: data2, 
            } 
            let ans = this.fruits.pushObject(temp); 
        }, 
    }, 
}); 

{{page-title "Student"}} 
<h3>List of Students: </h3> 
<br /> 
<table> 
    <tr> 
        <th>Name</th> 
        <th>isFruit </th> 
        <th>Color </th> 
  
    </tr> 
    {{#each @model as |detail|}} 
        <tr> 
            <td>{{detail.name}}</td> 
            <td> {{detail.isFruit}}</td> 
            <td>{{detail.color}}</td> 
        </tr> 
    {{/each}} 
</table> 
  
<br /> 
<br /> 
<div> 
    <input 
        type="button"
        id="check-fruit"
        value="Show Items details"
        {{action "find_Data"}} 
    /> 
</div><br /><br /> 
<div> 
    <label>Enter Fruit Name: </label> 
    {{input value=this.item1}} 
</div><br /> 
<div> 
    <label>Item is Fruit: </label> 
    {{input value=this.item2}} 
</div><br /> 
<div> 
    <label>Enter Fruit color: </label> 
    {{input value=this.item3}} 
</div><br /> 
<div> 
    <input 
        type="button"
        id="insert-item"
        value="Insert Fruit"
        {{action "insertItem" this.item1  
         this.item2 this.item3}} 
    /> 
</div> 
  
{{outlet}}