极客教程Ember.js ArrayProxy类
Ember.js 是一个开源的JavaScript框架，用于开发基于模型-视图-控制器（MVC）架构的大型客户端Web应用程序。Ember.js是最广泛使用的前端应用程序框架之一。它被用于加快开发速度和提高生产力。目前，许多网站都在使用它，包括Square、Discourse、Groupon、Linked In、Live Nation、Twitch和Chipotle。
ArrayProxy类:
ArrayProxy类作为一个包装对象，将所有请求转发给实现了Array和/或MutableArray的其他对象。更改底层数组的能力在各种绑定用例和其他情况下都是有利的。
方法: 以下是该类的方法列表。
- addObject: 此方法用于将对象推送到数组的末尾，前提是该对象不是一个已经存在的数组。
- addObjects: 此方法用于将若干个对象添加到数组中。
- addObserver: 此方法用于为属性注册观察者。
- any: 此方法用于检查目标中是否有任何对象与回调函数所规定的条件匹配。
- cacheFor: 此方法用于获取已计算好的属性的缓存值（如果存在）。
- clear: 此方法移除数组中的所有元素。
- compact: 此方法用于压缩数组，即移除数组中的所有空值。
-
这个方法用于复制一个数组，但不包括null和undefined元素。
- decrementProperty： 这个方法用于将属性的值减去指定的数值。
- destroy： 这个方法通过设置isDestroyed标志和删除元数据来销毁一个对象。
- every： 这个方法用于检查数组中的所有对象是否都满足特定的回调函数。
- filter： 这个方法用于根据特定条件过滤数组中的对象。
- filterBy： 这个方法用于返回只包含具有匹配属性的项的数组。
- find：
- findBy: 该方法用于找到与给定回调函数匹配的元素。
- forEach: 该方法用于对数组的每个项执行一个函数。
- get: 该方法用于从对象中获取属性的值。
- getEach: 该方法用于获取数组中给定键的所有值。
- getProperties: 该方法用于一次性获取多个属性的值。
- includes: 该方法用于检查数组中是否存在给定对象。
- incrementProperty: 此方法用于将属性的值设置为当前值加上某个值。
- indexOf: 此方法用于在数组中查找给定对象的索引。
- init: 此方法在实例化对象时被调用。
- insertAt: 此方法用于在数组的特定位置插入一个对象。
- invoke: 此方法用于在实现它的接收器中调用传递的方法。
- isAny: 此方法用于检查数组中的任何元素是否使传递的属性解析为期望的值。
- isEvery:
- every: 此方法用于检查数组中的每个元素是否满足指定属性的期望值。
- lastIndexOf: 此方法用于查找数组中对象的最后一个索引。
- map: 此方法用于使用特定函数映射数组中的所有项。
- mapBy: 此方法用于获取列表中所有项的指定属性的值。
- notifyPropertyChange: 此方法通知观察者系统发生了属性变化。
- objectAt: 此方法用于检索给定索引处的对象。
- objectAtContent: 此方法用于从内容中检索指定索引处的对象。
- objectsAt: 此方法用于获取给定索引数组中的项目。
- popObject: 此方法用于从数组中弹出对象。
- pushObject: 此方法用于将对象推入数组中。
- pushObjects: 此方法用于将多个对象推入数组中。
- reduce: 此方法用于将数组的值合并为单个值。
- reject: 此方法提供了一个包含所有枚举元素的列表，其中提供的函数返回false。
- rejectBy: 此方法返回一个包含给定键值为false的对象的数组。
- removeAt: 这个方法用于删除给定索引上的元素。
- removeObject: 这个方法从数组中删除所有该对象的实例。
- removeObjects: 这个方法从给定数组中删除每个提供的项目。
- removeObserver: 这个方法从此对象中删除之前注册过的任何观察者。
- replace: 这个方法用于用给定的对象替换数组中的一些元素。
- replaceContent: 实际上，这个方法在内容数组上替换指定的对象。
- reverseObjects: 这个方法颠倒数组中的元素。
- set: 该方法用于将键和值设置到对象中。
- setEach: 该方法用于设置每个成员的命名属性的值。
- setObjects: 该方法用参数的内容替换接收者的内容。
- setProperties: 该方法一次性设置多个属性。
- shiftObject: 该方法从数组的开头移除nil（如果没有了）或对象。
- slice: 该方法用于返回接收者的一部分的新数组。
- sortBy: 该方法用于按指定的键对数组进行排序。
- toArray: 这个方法将对象转换成一个真正的数组。
- toString: 这个方法用于获取对象的字符串表示。
- toggleProperty: 这个方法用于将布尔属性的值设置为与其当前值相反的值。
- uniq: 这个方法返回一个含有唯一值的全新数组。
- uniqBy: 这个方法用于获取具有指定键的唯一值的对象。
- unshiftObject: 这个方法用于将单个对象添加到数组的开头。
- unshiftObjects: 这个方法用于将对象添加到数组的前面。
- willDestroy: 这个方法会销毁对象。
- without: 这个方法返回一个不包含给定值的新数组。
属性: 以下是该类的属性列表：
- []: 此属性用于获取或设置数组内容。
- arrangedContent: 此属性定义代理所代表的数组。
- concatenatedProperties: 此属性指定将连接到超类的特性。
- content: 此属性用于转发对象属性。
- firstObject: 此属性用于检索数组的第一个对象。
- isDestroyed: 此属性是销毁完成的标志。
- isDestroying: 此属性是销毁计划的标志。
- lastObject: 此属性用于检索数组的最后一个对象。
- length: 此属性用于检索数组的长度。
- mergedProperties: 此属性帮助合并子类属性的值与ember类的超类属性值。
步骤1： 为了运行以下示例，您需要一个ember项目。要创建一个项目，您首先需要安装ember-cli。在终端中写入以下代码：
npm install ember-cli
步骤2： 现在您可以通过输入以下一段代码来创建项目：
ember new <project-name> --lang en
启动服务器，请输入：
ember serve
示例1： 在这个示例中，我将演示类的 sortBy 函数的使用方法。
输入以下代码以生成此示例的路由：
ember generate route languages
app/routes/languages.js
import Route from '@ember/routing/route';
import { classify, w } from '@ember/string';
import { pushObject, sortBy } from '@ember/array';
export default class LanguagesRoute extends Route {
name =
`mandarin_Chinese spanish english Hindi
bengali Portuguese russian japanese
western_punjabi yueChinese`;
num = `929.0 474.7 372.9 343.9 233.7
232.4 154.0 125.3 92.7 85.2`;
languages = [];
initLanguages() {
this.languages = [];
this.name = w(this.name);
this.num = w(this.num);
for (let i = 0; i < this.name.length; i++) {
let obj = new Object();
obj['name'] = classify(this.name[i]);
obj['num'] = this.num[i];
this.languages.pushObject(obj);
}
}
model() {
this.initLanguages();
this.languages = this.languages.sortBy('name');
return this.languages;
}
}
app/template/languages.js
{{page-title "Languages"}}
<h2>Most Spoken Languages in the World</h2>
<table style="border: 2px solid black;padding: 30px;">
<tr>
<th>Language</th>
<th>Native Speakers (millions)</th>
</tr>
{{#each @model as |language|}}
<tr>
<td>{{language.name}}</td>
<td>{{language.num}}</td>
</tr>
{{/each}}
</table>
{{outlet}}
输出：
示例2： 在这个示例中，我将演示使用函数：objectsAt()、removeObject()、removeObjects()、slice()、reverseObjects()、setObjects()和reject()的用法。
输入以下代码来生成这个示例的路由：
ember generate route party
app/routes/party.js
import Route from "@ember/routing/route";
export default class PartyRoute extends Route {
partyItems = [
"Digital Camera",
"Jugs, cups & straws",
"Balloons",
"Scissors",
"Cold Drink",
"Table Confetti",
"Party Hats",
"Wine",
"Napkins",
"Party Plates",
"Speakers",
"Music System",
"Cups",
];
itemString;
itemList;
start;
end;
helper(itemString) {
this.itemList = itemString.split(",");
for (let i = 0; i < this.itemList.length; i++)
this.itemList[i] = this.itemList[i].trim();
return this.itemList;
}
model() {
return this.partyItems;
}
setupController(controller, model) {
this._super(controller, model);
controller.set("helper", this.helper);
controller.set("partyItems", this.partyItems);
controller.set("itemString", this.itemString);
controller.set("itemList", this.itemList);
controller.set("start", this.start);
controller.set("end", this.end);
}
}
app/controllers/party.js
import Ember from "ember";
import {
objectsAt,
removeObject,
removeObjects,
slice,
reverseObjects,
setObjects,
reject,
} from "@ember/array";
export default Ember.Controller.extend({
actions: {
getItems(itemString) {
this.itemList = this.helper(itemString);
for (let i = 0; i < this.itemList.length; i++)
this.itemList[i] = parseInt(this.itemList[i]);
let tempItems =
this.partyItems.objectsAt(this.itemList);
let str = "";
for (let i = 0; i < tempItems.length; i++)
str += tempItems[i] + "\n";
alert(str);
},
removeItems(itemString) {
this.itemList = this.helper(itemString);
if (this.itemList.length == 1)
this.partyItems.removeObject(this.itemList[0]);
else this.partyItems.removeObjects(this.itemList);
this.set("itemString", "");
},
sliceItems(start, end) {
let tempItems = this.partyItems.slice(start, end);
let str = "";
for (let i = 0; i < tempItems.length; i++)
str += tempItems[i] + "\n";
alert(str);
},
reverseItems() {
this.set("partyItems",
this.partyItems.reverseObjects());
},
replaceItems(itemString) {
this.partyItems.setObjects(this.helper(itemString));
},
findMultiwordItems() {
let reqItem = this.partyItems.reject(
(item) => item.split(" ").toArray().length == 1
);
alert(reqItem);
},
},
});
app/template/party.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 Items: </label>
{{input value=this.itemString}}
</div>
<div>
<input
type="button"
id="remove-item"
value="Remove Items"
{{action "removeItems" this.itemString}}
/>
</div>
<br /><br />
<div>
<label>Enter Start Index: </label>
{{input value=this.start}}
</div>
<div>
<label>Enter End Index: </label>
{{input value=this.end}}
</div>
<div>
<input
type="button"
id="slice"
value="Slice"
{{action "sliceItems" this.start this.end}}
/>
</div>
<br /><br />
<div>
<label>Enter Indices: </label>
{{input value=this.itemString}}
</div>
<div>
<input
type="button"
id="get-item"
value="Get Items"
{{action "getItems" this.itemString}}
/>
</div>
<br /><br />
<div>
<label>Enter Items: </label>
{{input value=this.itemString}}
</div>
<div>
<input
type="button"
id="replace-item"
value="Replace Items"
{{action "replaceItems" this.itemString}}
/>
</div>
<br /><br />
<input
type="button"
id="reverse-items"
value="Reverse"
{{action "reverseItems"}}
/>
<br /><br />
<input
type="button"
id="find-items"
value="Find"
{{action "findMultiwordItems"}}
/>
{{outlet}}
输出：
参考： https://api.emberjs.com/ember/4.9/classes/ArrayProxy