-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
computed.js
610 lines (489 loc) · 16 KB
/
computed.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
import { set } from "ember-metal/property_set";
import {
meta,
inspect
} from "ember-metal/utils";
import expandProperties from "ember-metal/expand_properties";
import EmberError from "ember-metal/error";
import {
Descriptor,
defineProperty
} from "ember-metal/properties";
import {
propertyWillChange,
propertyDidChange
} from "ember-metal/property_events";
import {
addDependentKeys,
removeDependentKeys
} from "ember-metal/dependent_keys";
/**
@module ember-metal
*/
var metaFor = meta;
var a_slice = [].slice;
function UNDEFINED() { }
// ..........................................................
// COMPUTED PROPERTY
//
/**
A computed property transforms an objects function into a property.
By default the function backing the computed property will only be called
once and the result will be cached. You can specify various properties
that your computed property is dependent on. This will force the cached
result to be recomputed if the dependencies are modified.
In the following example we declare a computed property (by calling
`.property()` on the fullName function) and setup the properties
dependencies (depending on firstName and lastName). The fullName function
will be called once (regardless of how many times it is accessed) as long
as it's dependencies have not been changed. Once firstName or lastName are updated
any future calls (or anything bound) to fullName will incorporate the new
values.
```javascript
var Person = Ember.Object.extend({
// these will be supplied by `create`
firstName: null,
lastName: null,
fullName: function() {
var firstName = this.get('firstName');
var lastName = this.get('lastName');
return firstName + ' ' + lastName;
}.property('firstName', 'lastName')
});
var tom = Person.create({
firstName: 'Tom',
lastName: 'Dale'
});
tom.get('fullName') // 'Tom Dale'
```
You can also define what Ember should do when setting a computed property.
If you try to set a computed property, it will be invoked with the key and
value you want to set it to. You can also accept the previous value as the
third parameter.
```javascript
var Person = Ember.Object.extend({
// these will be supplied by `create`
firstName: null,
lastName: null,
fullName: function(key, value, oldValue) {
// getter
if (arguments.length === 1) {
var firstName = this.get('firstName');
var lastName = this.get('lastName');
return firstName + ' ' + lastName;
// setter
} else {
var name = value.split(' ');
this.set('firstName', name[0]);
this.set('lastName', name[1]);
return value;
}
}.property('firstName', 'lastName')
});
var person = Person.create();
person.set('fullName', 'Peter Wagenet');
person.get('firstName'); // 'Peter'
person.get('lastName'); // 'Wagenet'
```
@class ComputedProperty
@namespace Ember
@extends Ember.Descriptor
@constructor
*/
function ComputedProperty(func, opts) {
func.__ember_arity__ = func.length;
this.func = func;
this._dependentKeys = undefined;
this._suspended = undefined;
this._meta = undefined;
this._cacheable = (opts && opts.cacheable !== undefined) ? opts.cacheable : true;
this._dependentKeys = opts && opts.dependentKeys;
this._readOnly = opts && (opts.readOnly !== undefined || !!opts.readOnly) || false;
}
ComputedProperty.prototype = new Descriptor();
var ComputedPropertyPrototype = ComputedProperty.prototype;
/**
Properties are cacheable by default. Computed property will automatically
cache the return value of your function until one of the dependent keys changes.
Call `volatile()` to set it into non-cached mode. When in this mode
the computed property will not automatically cache the return value.
However, if a property is properly observable, there is no reason to disable
caching.
@method cacheable
@param {Boolean} aFlag optional set to `false` to disable caching
@return {Ember.ComputedProperty} this
@chainable
*/
ComputedPropertyPrototype.cacheable = function(aFlag) {
this._cacheable = aFlag !== false;
return this;
};
/**
Call on a computed property to set it into non-cached mode. When in this
mode the computed property will not automatically cache the return value.
```javascript
var outsideService = Ember.Object.extend({
value: function() {
return OutsideService.getValue();
}.property().volatile()
}).create();
```
@method volatile
@return {Ember.ComputedProperty} this
@chainable
*/
ComputedPropertyPrototype.volatile = function() {
return this.cacheable(false);
};
/**
Call on a computed property to set it into read-only mode. When in this
mode the computed property will throw an error when set.
```javascript
var Person = Ember.Object.extend({
guid: function() {
return 'guid-guid-guid';
}.property().readOnly()
});
var person = Person.create();
person.set('guid', 'new-guid'); // will throw an exception
```
@method readOnly
@return {Ember.ComputedProperty} this
@chainable
*/
ComputedPropertyPrototype.readOnly = function(readOnly) {
this._readOnly = readOnly === undefined || !!readOnly;
return this;
};
/**
Sets the dependent keys on this computed property. Pass any number of
arguments containing key paths that this computed property depends on.
```javascript
var President = Ember.Object.extend({
fullName: computed(function() {
return this.get('firstName') + ' ' + this.get('lastName');
// Tell Ember that this computed property depends on firstName
// and lastName
}).property('firstName', 'lastName')
});
var president = President.create({
firstName: 'Barack',
lastName: 'Obama'
});
president.get('fullName'); // 'Barack Obama'
```
@method property
@param {String} path* zero or more property paths
@return {Ember.ComputedProperty} this
@chainable
*/
ComputedPropertyPrototype.property = function() {
var args;
var addArg = function (property) {
args.push(property);
};
args = [];
for (var i = 0, l = arguments.length; i < l; i++) {
expandProperties(arguments[i], addArg);
}
this._dependentKeys = args;
return this;
};
/**
In some cases, you may want to annotate computed properties with additional
metadata about how they function or what values they operate on. For example,
computed property functions may close over variables that are then no longer
available for introspection.
You can pass a hash of these values to a computed property like this:
```
person: function() {
var personId = this.get('personId');
return App.Person.create({ id: personId });
}.property().meta({ type: App.Person })
```
The hash that you pass to the `meta()` function will be saved on the
computed property descriptor under the `_meta` key. Ember runtime
exposes a public API for retrieving these values from classes,
via the `metaForProperty()` function.
@method meta
@param {Hash} meta
@chainable
*/
ComputedPropertyPrototype.meta = function(meta) {
if (arguments.length === 0) {
return this._meta || {};
} else {
this._meta = meta;
return this;
}
};
/* impl descriptor API */
ComputedPropertyPrototype.didChange = function(obj, keyName) {
// _suspended is set via a CP.set to ensure we don't clear
// the cached value set by the setter
if (this._cacheable && this._suspended !== obj) {
var meta = metaFor(obj);
if (meta.cache[keyName] !== undefined) {
meta.cache[keyName] = undefined;
removeDependentKeys(this, obj, keyName, meta);
}
}
};
function finishChains(chainNodes)
{
for (var i=0, l=chainNodes.length; i<l; i++) {
chainNodes[i].didChange(null);
}
}
/**
Access the value of the function backing the computed property.
If this property has already been cached, return the cached result.
Otherwise, call the function passing the property name as an argument.
```javascript
var Person = Ember.Object.extend({
fullName: function(keyName) {
// the keyName parameter is 'fullName' in this case.
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName')
});
var tom = Person.create({
firstName: 'Tom',
lastName: 'Dale'
});
tom.get('fullName') // 'Tom Dale'
```
@method get
@param {String} keyName The key being accessed.
@return {Object} The return value of the function backing the CP.
*/
ComputedPropertyPrototype.get = function(obj, keyName) {
var ret, cache, meta, chainNodes;
if (this._cacheable) {
meta = metaFor(obj);
cache = meta.cache;
var result = cache[keyName];
if (result === UNDEFINED) {
return undefined;
} else if (result !== undefined) {
return result;
}
ret = this.func.call(obj, keyName);
if (ret === undefined) {
cache[keyName] = UNDEFINED;
} else {
cache[keyName] = ret;
}
chainNodes = meta.chainWatchers && meta.chainWatchers[keyName];
if (chainNodes) { finishChains(chainNodes); }
addDependentKeys(this, obj, keyName, meta);
} else {
ret = this.func.call(obj, keyName);
}
return ret;
};
/**
Set the value of a computed property. If the function that backs your
computed property does not accept arguments then the default action for
setting would be to define the property on the current object, and set
the value of the property to the value being set.
Generally speaking if you intend for your computed property to be set
your backing function should accept either two or three arguments.
```javascript
var Person = Ember.Object.extend({
// these will be supplied by `create`
firstName: null,
lastName: null,
fullName: function(key, value, oldValue) {
// getter
if (arguments.length === 1) {
var firstName = this.get('firstName');
var lastName = this.get('lastName');
return firstName + ' ' + lastName;
// setter
} else {
var name = value.split(' ');
this.set('firstName', name[0]);
this.set('lastName', name[1]);
return value;
}
}.property('firstName', 'lastName')
});
var person = Person.create();
person.set('fullName', 'Peter Wagenet');
person.get('firstName'); // 'Peter'
person.get('lastName'); // 'Wagenet'
```
@method set
@param {String} keyName The key being accessed.
@param {Object} newValue The new value being assigned.
@param {String} oldValue The old value being replaced.
@return {Object} The return value of the function backing the CP.
*/
ComputedPropertyPrototype.set = function computedPropertySetWithSuspend(obj, keyName, value) {
var oldSuspended = this._suspended;
this._suspended = obj;
try {
this._set(obj, keyName, value);
} finally {
this._suspended = oldSuspended;
}
};
ComputedPropertyPrototype._set = function computedPropertySet(obj, keyName, value) {
var cacheable = this._cacheable;
var func = this.func;
var meta = metaFor(obj, cacheable);
var cache = meta.cache;
var hadCachedValue = false;
var funcArgLength, cachedValue, ret;
if (this._readOnly) {
throw new EmberError('Cannot set read-only property "' + keyName + '" on object: ' + inspect(obj));
}
if (cacheable && cache[keyName] !== undefined) {
if(cache[keyName] !== UNDEFINED) {
cachedValue = cache[keyName];
}
hadCachedValue = true;
}
// Check if the CP has been wrapped. If it has, use the
// length from the wrapped function.
funcArgLength = func.wrappedFunction ? func.wrappedFunction.__ember_arity__ : func.__ember_arity__;
// For backwards-compatibility with computed properties
// that check for arguments.length === 2 to determine if
// they are being get or set, only pass the old cached
// value if the computed property opts into a third
// argument.
if (funcArgLength === 3) {
ret = func.call(obj, keyName, value, cachedValue);
} else if (funcArgLength === 2) {
ret = func.call(obj, keyName, value);
} else {
defineProperty(obj, keyName, null, cachedValue);
set(obj, keyName, value);
return;
}
if (hadCachedValue && cachedValue === ret) { return; }
var watched = meta.watching[keyName];
if (watched) {
propertyWillChange(obj, keyName);
}
if (hadCachedValue) {
cache[keyName] = undefined;
}
if (cacheable) {
if (!hadCachedValue) {
addDependentKeys(this, obj, keyName, meta);
}
if (ret === undefined) {
cache[keyName] = UNDEFINED;
} else {
cache[keyName] = ret;
}
}
if (watched) {
propertyDidChange(obj, keyName);
}
return ret;
};
/* called before property is overridden */
ComputedPropertyPrototype.teardown = function(obj, keyName) {
var meta = metaFor(obj);
if (keyName in meta.cache) {
removeDependentKeys(this, obj, keyName, meta);
}
if (this._cacheable) { delete meta.cache[keyName]; }
return null; // no value to restore
};
/**
This helper returns a new property descriptor that wraps the passed
computed property function. You can use this helper to define properties
with mixins or via `Ember.defineProperty()`.
The function you pass will be used to both get and set property values.
The function should accept two parameters, key and value. If value is not
undefined you should set the value first. In either case return the
current value of the property.
A computed property defined in this way might look like this:
```js
var Person = Ember.Object.extend({
firstName: 'Betty',
lastName: 'Jones',
fullName: Ember.computed('firstName', 'lastName', function(key, value) {
return this.get('firstName') + ' ' + this.get('lastName');
})
});
var client = Person.create();
client.get('fullName'); // 'Betty Jones'
client.set('lastName', 'Fuller');
client.get('fullName'); // 'Betty Fuller'
```
_Note: This is the prefered way to define computed properties when writing third-party
libraries that depend on or use Ember, since there is no guarantee that the user
will have prototype extensions enabled._
You might use this method if you disabled
[Prototype Extensions](http://emberjs.com/guides/configuring-ember/disabling-prototype-extensions/).
The alternative syntax might look like this
(if prototype extensions are enabled, which is the default behavior):
```js
fullName: function () {
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName')
```
@method computed
@for Ember
@param {String} [dependentKeys*] Optional dependent keys that trigger this computed property.
@param {Function} func The computed property function.
@return {Ember.ComputedProperty} property descriptor instance
*/
function computed(func) {
var args;
if (arguments.length > 1) {
args = a_slice.call(arguments);
func = args.pop();
}
if (typeof func !== "function") {
throw new EmberError("Computed Property declared without a property function");
}
var cp = new ComputedProperty(func);
if (args) {
cp.property.apply(cp, args);
}
return cp;
}
/**
Returns the cached value for a property, if one exists.
This can be useful for peeking at the value of a computed
property that is generated lazily, without accidentally causing
it to be created.
@method cacheFor
@for Ember
@param {Object} obj the object whose property you want to check
@param {String} key the name of the property whose cached value you want
to return
@return {Object} the cached value
*/
function cacheFor(obj, key) {
var meta = obj['__ember_meta__'];
var cache = meta && meta.cache;
var ret = cache && cache[key];
if (ret === UNDEFINED) { return undefined; }
return ret;
}
cacheFor.set = function(cache, key, value) {
if (value === undefined) {
cache[key] = UNDEFINED;
} else {
cache[key] = value;
}
};
cacheFor.get = function(cache, key) {
var ret = cache[key];
if (ret === UNDEFINED) { return undefined; }
return ret;
};
cacheFor.remove = function(cache, key) {
cache[key] = undefined;
};
export {
ComputedProperty,
computed,
cacheFor
};