Computed property depending on ALL properties of #each - ember.js

I've used before the type of computed property that looks like this:
isAnyoneHungry: function () {
var everyone = this.get('everyone'),
anyoneHungry = false;
everyone.forEach(function(person) {
if (person.get('isHungry')) {
anyoneHungry = true;
}
});
return anyoneHungry;
}.property('everyone.#each.isHungry'),
everyone: Ember.A() // an array that will hold person models
for computing something based on one property of each object in an array.
Is it possible to make a computed property based on every property of each object in an array?
Say that the person model has many boolean properties like isHungry, isTired, isCranky, ... and I want to be able to recompute this property when any one of those changes. But I'm lazy and don't want to type every single property like this:
function(){...}.property('everyone.#each.isHungry', 'everyone.#each.isTired', 'everyone.#each.isCranky'.
Instead I'd like something like this:
isAnyoneUnhappy: function () {
var everyone = this.get('everyone'),
isAnyoneUnhappy = false;
everyone.forEach(function (person) {
if (person.get('isHungry') || person.get('isTired') || person.get('isCranky')) {
isAnyoneUnhappy = true;
}
});
return isAnyoneUnhappy;
}.property('everyone.#each.iWantEveryPropertyHere')
Is this possible in Ember yet?

Have you tried the following?
isAnyoneUnhappy: function () {
var everyone = this.get('everyone'),
isAnyoneUnhappy = false;
everyone.forEach(function (person) {
if (person.get('isHungry') || person.get('isTired') || person.get('isCranky')) {
isAnyoneUnhappy = true;
}
});
return isAnyoneUnhappy;
}.property('everyone.#each.*')
I looked into the Ember source and there seems to be some logic dealing with the star notation. I am not sure though.

Ideally you should have a property on person that rolls up the unhappy attributes, something like:
isUnhappy: function () {
if (this.get('isHungry') || this.get('isTired') || this.get('isCranky')) {
return true;
}
}.property('isTired', 'isHungry', 'isCranky')
Then isAnyoneUnhappy just observes everyone.#each.isUnhappy

Related

Intersection of promises and dependent computed properties

I have a user model which has 2 relations (myFriends and friendsWithMe). The intersection is the Array of users which represents the real friends. I have solved this Computatation with RSVP.all :
friends: function() {
var ret = [];
Ember.RSVP.all([this.get('myFriends'), this.get('friendsWithMe')]).then(function(results) {
ret.pushObjects(_.intersection(results[0].get('content'), results[1].get('content'))) ;
});
return ret;
}.property('myFriends.#each', 'friendsWithMe.#each'),
The Problem is now I have another computed property that depends on this one:
/**
* Gives the relation between two User
* 4: has requested your friendship
* 3: Yourself
* 2: Friends
* 1: FriendShip Request
*/
myFriendshipStatus: function() {
if(this.get('friends').contains(this.container.lookup('user:current'))){
return 2;
} else if(this.get('friendsWithMe').contains(this.container.lookup('user:current'))){
return 4;
} else if(this.get('myFriends').contains(this.container.lookup('user:current'))){
return 1;
} else if (this.get('id') === this.container.lookup('user:current').get('id')){
return 3;
} else {
return 0;
}
}.property('friends.#each')
When I now debug myFriendShipStatus the promises are not resolved and the "friends" array has no entries yet.
I have also tried to change my friends function to the ember.computed.intersect, which would then look like this:
friends: function() {
return Ember.computed.intersect('myFriends', 'friendsWithMe')
}.property('myFriends.#each', 'friendsWithMe.#each'),
But then I get an exception from this line:
if(this.get('friends').contains(this.container.lookup('user:current'))){
Because the ArrayComputedProperty has no function contains.
How can get my friends function together with myFriendShipStatus working? I would prefer to use Ember.computed.intersect, but I don't know how I check then for it's values.
The reason it returns an empty array in the first example is as follows. Immediately after the Ember.RSVP.all() call, the return statement will be executed, returning an empty ret array. At some point in the future the RSVP promise will fulfill, but since the friends function has already returned the empty array, this will have no effect.
Here is what you could do:
// See http://emberjs.com/api/#method_A
friends: Ember.A,
recalculateFriends: function() {
Ember.RSVP.all([this.get('myFriends'), this.get('friendsWithMe')]).then(function(results) {
var myFriends = results[0], friendsWithMe = results[1];
this.set('friends', _.intersection(myFriends.get('content'), friendsWithMe.get('content')));
});
}.property('myFriends', 'friendsWithMe'), // #each is redundant here
myFriendshipStatus: function() {
// Will be recalculated when the friends array changes (which will in turn recalculate when myFriends or friendsWithMe changes
}.property('friends'),
And... I'm just now noticing you're using Ember.computed.intersect wrong :P It shouldn't be wrapped inside a function:
friends: Ember.computed.intersect('myFriends', 'friendsWithMe')
(See example: http://emberjs.com/api/#method_computed_intersect),

How to solve code smell: Computed property for output formatting

Hi i have this ember model. The likeMessage computed Property is building a string that i am using in my template. (see below)
This works, but i'm not comfortable having this "view layer code" in my model. What would be a better approach?
/**
* #class
* #name Entry
*/
James.Entry = Ember.Object.extend(
/** #lends Entry# */
{
likes: [],
likeMessage: function() {
var likes = this.get("likes"),
withNameCount = 0,
names = [],
likeCount = likes.length;
for(;withNameCount < likes.length && withNameCount < 2; withNameCount++) {
names.push(likes[withNameCount].name);
}
if(likeCount == 0) {
return "Nobody likes this";
} else if(likeCount == 1) {
return names[0]+ " likes this";
} else if(likeCount <= 2) {
return names.join(" and ")+" like this";
} else {
return names.join(", ")+" and "+(likes.length-2)+" others like this";
}
}.property("likes")
}
);
My template:
Likes:
{{likeMessage}}
Computed properties that are for presentation belong in the controller layer in Ember. To get easy access to the model, you can use an Ember.ObjectController and set the content property to the model instance you are showing.
I recently put together a presentation recently about what goes where when architecting an Ember app. Perhaps it could be useful: http://www.lukemelia.com/blog/archives/2012/08/23/architecting-ember-js-apps/
You could move that method pretty much as is to an EntryView and then call view.likeMessage in the template.
Without knowing your View classes I cannot be more specific but typically you would have a corresponding view for every model (often two, one "singular" and one "plural" for handling collections or single instances of the model).

How do I use localized strings in handlebar templates?

Say I had a view like:
<script type="text/x-handlebars" data-template-name="say-hello">
Hello, <b>{{name}}</b>
</script>
How would I localize the word "Hello," using the built in Ember.String.loc()? I am not seeing a solution in the documentation/code.
I am now using built in localization.
To do so one would create a 'simple' view helper: http://gist.github.com/3093861:
Handlebars.registerHelper('loc', function(property, fn) {
var str;
// we are bound to a value, it is now the context
if (fn.contexts && typeof fn.contexts[0] === 'string') {
str = fn.contexts[0];
// Convention, start all localization keys with _
} else if (property[0] === '_') {
str = property;
// Convention, start all globals with capital
} else if (/[A-Z]/.test(property[0])) {
str = Em.getPath(window, property)
// all other's are local properties
} else {
str = this.getPath(property)
}
return new Handlebars.SafeString((str || '').loc(''));
});
// use:
// {{loc _some_string}}
// {{#bind App.someString}}{{loc App.someString}}{{/bind}}
// {{#bind view.localString}}{{loc view.localString}}{{/bind}}
But this is not as clean as it should be, note how bound values need to be wrapped in {{#bind}}
Still open to better options. (I think I can update the view helper to support bindings, but have not investigated further yet)

How *not* to destroy View when exiting a route in Ember.js

Regarding the new Ember.js routing system (described here), if I understand correctly, views are destroyed when you exit a route.
Is there any way to bypass destruction of views upon exiting a route, so that the state of the view is preserved when the user re-enters the route?
Update: Looks like, views are not destroyed unless the outlet view is being replaced in the new route. For e.g., if you are in stateA with ViewA in some {{outlet master}} and you go to stateB with ViewB in {{outlet master}}, then ViewB will replace ViewA. A way around this is to define multiple outlets when you need to preserve views, e.g., {{outlet master1}}, {{outlet master2}}, ...
A nice feature would be the ability to pass an array of views to the outlet. And also be able to choose whether views will be destroyed or just become hidden, upon exiting a route.
I have since figure out how to modify the routing system, so that views inserted into outlets are not destroyed. First I override the Handlebars outlet helper, so that it loads an Ember.OutletView into {{outlet}}:
Ember.Handlebars.registerHelper('outlet', function(property, options) {
if (property && property.data && property.data.isRenderData) {
options = property;
property = 'view';
}
options.hash.currentViewBinding = "controller." + property;
return Ember.Handlebars.helpers.view.call(this, Ember.OutletView, options);
});
Where Ember.OutletView extends Ember.ContainerView as follows:
Ember.OutletView = Ember.ContainerView.extend({
childViews: [],
_currentViewWillChange: Ember.beforeObserver( function() {
var childViews = this.get('childViews');
// Instead of removing currentView, just hide all childViews
childViews.setEach('isVisible', false);
}, 'currentView'),
_currentViewDidChange: Ember.observer( function() {
var childViews = this.get('childViews'),
currentView = this.get('currentView');
if (currentView) {
// Check if currentView is already within childViews array
// TODO: test
var alreadyPresent = childViews.find( function(child) {
if (Ember.View.isEqual(currentView, child, [])) {
return true;
}
});
if (!!alreadyPresent) {
alreadyPresent.set('isVisible', true);
} else {
childViews.pushObject(currentView);
}
}
}, 'currentView')
});
Basically we override _currentViewWillChange() and just hide all childViews instead of removing the currentView. Then in _currentViewDidChange() we check if the currentView is already inside childViews and act accordingly. The Ember.View.isEqual is a modified version of Underscore isEqual:
Ember.View.reopenClass({
isEqual: function(a, b, stack) {
// Identical objects are equal. `0 === -0`, but they aren't identical.
// See the Harmony `egal` proposal: http://wiki.ecmascript.org/doku.php?id=harmony:egal.
if (a === b) return a !== 0 || 1 / a == 1 / b;
// A strict comparison is necessary because `null == undefined`.
if (a == null || b == null) return a === b;
// Unwrap any wrapped objects.
if (a._chain) a = a._wrapped;
if (b._chain) b = b._wrapped;
// Compare `[[Class]]` names.
var className = toString.call(a);
if (className != toString.call(b)) return false;
if (typeof a != 'object' || typeof b != 'object') return false;
// Assume equality for cyclic structures. The algorithm for detecting cyclic
// structures is adapted from ES 5.1 section 15.12.3, abstract operation `JO`.
var length = stack.length;
while (length--) {
// Linear search. Performance is inversely proportional to the number of
// unique nested structures.
if (stack[length] == a) return true;
}
// Add the first object to the stack of traversed objects.
stack.push(a);
var size = 0, result = true;
// Recursively compare objects and arrays.
if (className == '[object Array]') {
// Compare array lengths to determine if a deep comparison is necessary.
size = a.length;
result = size == b.length;
if (result) {
// Deep compare the contents, ignoring non-numeric properties.
while (size--) {
// Ensure commutative equality for sparse arrays.
if (!(result = size in a == size in b && this.isEqual(a[size], b[size], stack))) break;
}
}
} else {
// Objects with different constructors are not equivalent.
if (a.get('constructor').toString() != b.get('constructor').toString()) {
return false;
}
// Deep compare objects.
for (var key in a) {
if (a.hasOwnProperty(key)) {
// Count the expected number of properties.
size++;
// Deep compare each member.
if ( !(result = b.hasOwnProperty(key) )) break;
}
}
}
// Remove the first object from the stack of traversed objects.
stack.pop();
return result;
}
});
So that the state of the view is preserved when the user re-enters the
route.
I would, instead, store that information in the controller (or the state manager) so that when the route is re-entered, the new view is initialized with the old state. Does that make sense? So, for example, if it's a list of posts, and one is selected, you would store the data about which post was selected in the controller (or the state manager). After visiting a specific post and then coming back to the list, that same post would be selected.
I can imagine a use case where this wouldn't be very useful (e.g. scrolling to a specific position in a long list) so maybe that doesn't answer your question.

Reflection on EmberJS objects? How to find a list of property keys without knowing the keys in advance

Is there a way to retrieve the set-at-creations properties of an EmberJS object if you don't know all your keys in advance?
Via the inspector I see all the object properties which appear to be stored in the meta-object's values hash, but I can't seem to find any methods to get it back. For example object.getProperties() needs a key list, but I'm trying to create a generic object container that doesn't know what it will contain in advance, but is able to return information about itself.
I haven't used this in production code, so your mileage may vary, but reviewing the Ember source suggests two functions that might be useful to you, or at least worth reviewing the implementation:
Ember.keys: "Returns all of the keys defined on an object or hash. This is useful when inspecting objects for debugging. On browsers that support it, this uses the native Object.keys implementation." Object.keys documentation on MDN
Ember.inspect: "Convenience method to inspect an object. This method will attempt to convert the object into a useful string description." Source on Github
I believe the simple answer is: you don't find a list of props. At least I haven't been able to.
However I noticed that ember props appear to be prefixed __ember, which made me solve it like this:
for (f in App.model) {
if (App.model.hasOwnProperty(f) && f.indexOf('__ember') < 0) {
console.log(f);
}
};
And it seems to work. But I don't know whether it's 100% certain to not get any bad props.
EDIT: Adam's gist is provided from comments. https://gist.github.com/1817543
var getOwnProperties = function(model){
var props = {};
for(var prop in model){
if( model.hasOwnProperty(prop)
&& prop.indexOf('__ember') < 0
&& prop.indexOf('_super') < 0
&& Ember.typeOf(model.get(prop)) !== 'function'
){
props[prop] = model[prop];
}
}
return props;
}
Neither of these answers are reliable, unfortunately, because any keys paired with a null or undefined value will not be visible.
e.g.
MyClass = Ember.Object.extend({
name: null,
age: null,
weight: null,
height: null
});
test = MyClass.create({name: 'wmarbut'});
console.log( Ember.keys(test) );
Is only going to give you
["_super", "name"]
The solution that I came up with is:
/**
* Method to get keys out of an object into an array
* #param object obj_proto The dumb javascript object to extract keys from
* #return array an array of keys
*/
function key_array(obj_proto) {
keys = [];
for (var key in obj_proto) {
keys.push(key);
}
return keys;
}
/*
* Put the structure of the object that you want into a dumb JavaScript object
* instead of directly into an Ember.Object
*/
MyClassPrototype = {
name: null,
age: null,
weight: null,
height: null
}
/*
* Extend the Ember.Object using your dumb javascript object
*/
MyClass = Ember.Object.extend(MyClassPrototype);
/*
* Set a hidden field for the keys the object possesses
*/
MyClass.reopen({__keys: key_array(MyClassPrototype)});
Using this method, you can now access the __keys field and know which keys to iterate over. This does not, however, solve the problem of objects where the structure isn't known before hand.
I use this:
Ember.keys(Ember.meta(App.YOUR_MODEL.proto()).descs)
None of those answers worked with me. I already had a solution for Ember Data, I was just after one for Ember.Object. I found the following to work just fine. (Remove Ember.getProperties if you only want the keys, not a hash with key/value.
getPojoProperties = function (pojo) {
return Ember.getProperties(pojo, Object.keys(pojo));
},
getProxiedProperties = function (proxyObject) {
// Three levels, first the content, then the prototype, then the properties of the instance itself
var contentProperties = getPojoProperties(proxyObject.get('content')),
prototypeProperties = Ember.getProperties(proxyObject, Object.keys(proxyObject.constructor.prototype)),
objectProperties = getPojoProperties(proxyObject);
return Ember.merge(Ember.merge(contentProperties, prototypeProperties), objectProperties);
},
getEmberObjectProperties = function (emberObject) {
var prototypeProperties = Ember.getProperties(emberObject, Object.keys(emberObject.constructor.prototype)),
objectProperties = getPojoProperties(emberObject);
return Ember.merge(prototypeProperties, objectProperties);
},
getEmberDataProperties = function (emberDataObject) {
var attributes = Ember.get(emberDataObject.constructor, 'attributes'),
keys = Ember.get(attributes, 'keys.list');
return Ember.getProperties(emberDataObject, keys);
},
getProperties = function (object) {
if (object instanceof DS.Model) {
return getEmberDataProperties(object);
} else if (object instanceof Ember.ObjectProxy) {
return getProxiedProperties(object);
} else if (object instanceof Ember.Object) {
return getEmberObjectProperties(object);
} else {
return getPojoProperties(object);
}
};
In my case Ember.keys(someObject) worked, without doing someObject.toJSON().
I'm trying to do something similar, i.e. render a generic table of rows of model data to show columns for each attribute of a given model type, but let the model describe its own fields.
If you're using Ember Data, then this may help:
http://emberjs.com/api/data/classes/DS.Model.html#method_eachAttribute
You can iterate the attributes of the model type and get meta data associated with each attribute.
This worked for me (from an ArrayController):
fields: function() {
var doc = this.get('arrangedContent');
var fields = [];
var content = doc.content;
content.forEach(function(attr, value) {
var data = Ember.keys(attr._data);
data.forEach(function(v) {
if( typeof v === 'string' && $.inArray(v, fields) == -1) {
fields.push(v);
}
});
});
return fields;
}.property('arrangedContent')