Is this possible? Something like .observes('_data'), but not.
The use case is, I have a Decays mixin that has some CPs that say how long its been since a model has been updated. I'd like these CPs to be able to update if any of the model's attrs have changed. isDirty also won't work, since my use case uses store.push to update the model.
I don't think there's a built-in way to do it, but it wouldn't be very difficult to make one. Just create a base class for all of your models and override the set function. Something like this:
var BaseModel = DS.Model.extend({
set: function(keyName, value) {
var ret = this._super.apply(this, arguments);
var attributes = Ember.get(this.constructor, 'attributes');
if (attributes[keyName]) {
this.trigger('attributeChanged');
}
return ret;
}
});
Then, you can listen for changes to any attribute like this:
model.on('attributeChanged', function() {});
I think you can even do something like this in the case of a controller or similar object (although I haven't tested it):
Controller.extend(Ember.Evented, {
modelPropertyChanged: function() {
}.on('model.attributeChanged')
});
Related
I currently use a {{link-to}} helper that was written by someone else to explicitly state the query params to pass to the next route and strip out others that are not stated. It looks like this:
//link-to example
{{#link-to 'route' (explicit-query-params fromDate=thisDate toDate=thisDate)} Link Text {{/link-to}}
//the helper
import {helper} from '#ember/component/helper';
import Object from '#ember/object';
import {assign} from '#ember/polyfills';
export function explicitQueryParams(params, hash) {
let values = assign({}, hash);
values._explicitQueryParams = true;
return Object.create({
isQueryParams: true,
values,
});
}
export default helper(explicitQueryParams);
// supporting method in router.js
const Router = EmberRouter.extend({
_hydrateUnsuppliedQueryParams(state, queryParams) {
if (queryParams._explicitQueryParams) {
delete queryParams._explicitQueryParams;
return queryParams;
}
return this._super(state, queryParams);
},
});
I've recently had a use case where I need to apply the same logic to a transitionTo() that is being used to redirect users from a route based on their access:
beforeModel() {
if (auth) {
this.transitionTo('route')
} else {
this.transitionTo('access-denied-route')
}
},
I am really struggling to see how I can refactor what I have in the handlebars helper to a re-usable function in the transitionTo() segment. I'm even unsure if transitionTo() forwards the same arguments as {{link-to}} or if I will have to fetch the queryParams somehow from a different location.
Any insight would be greatly appreciated.
Well first off, tapping into private methods like _hydrateUnsuppliedQueryParams is risky. It will make upgrading more difficult. Most people use resetController to clear stick query params. You could also explicitly clear the default values by passing empty values on the transition.
But, ill bite because this can be fun to figure out :) Check this ember-twiddle that does what you're wanting.
If you work from the beginning in the transitionTo case, we can see that in the router.js implementation:
transitionTo(...args) {
let queryParams;
let arg = args[0];
if (resemblesURL(arg)) {
return this._doURLTransition('transitionTo', arg);
}
let possibleQueryParams = args[args.length - 1];
if (possibleQueryParams && possibleQueryParams.hasOwnProperty('queryParams')) {
queryParams = args.pop().queryParams;
} else {
queryParams = {};
}
let targetRouteName = args.shift();
return this._doTransition(targetRouteName, args, queryParams);
}
So, if the last argument is an object with a query params obj, that's going directly into _doTransition, which ultimately calls:
_prepareQueryParams(targetRouteName, models, queryParams, _fromRouterService) {
let state = calculatePostTransitionState(this, targetRouteName, models);
this._hydrateUnsuppliedQueryParams(state, queryParams, _fromRouterService);
this._serializeQueryParams(state.handlerInfos, queryParams);
if (!_fromRouterService) {
this._pruneDefaultQueryParamValues(state.handlerInfos, queryParams);
}
}
which has the _hydrateUnsuppliedQueryParams function. So, to make this all work, you can't share the function directly from the helper you've created. Rather, just add _explicitQueryParams: true to your query params. Job done :)
The link-to version is different. The query params use
let queryParams = get(this, 'queryParams.values');
since the link-to component can take a variable number of dynamic segments and there needs to be some way to distinguish between the passed dynamic segments, a passed model, and query params.
I realize there have been several questions similar to this, but none of those answers seems to be resolving my issue. My objective is to take a list of language's, and filter them so that my template can display a subset of the full list.
I started off by verifying that my computed property is working:
MyController.js
// Works as expected
languagesFiltered: function() {
return this.get('languages');
}.property('languages')
Then I added in a filter function, but here's where I ran into trouble:
MyController.js
languagesFiltered: function() {
// console.log shows that languages is actually a promise
var languages = this.get('languages');
// all of this returns a promise, but Handlebars can't handle the promise
return languages.then( function( languagesArray ) {
return languagesArray.filter( function( item, index, enumerable) {
return item.get('name') !== 'English';
});
})
}.property('languages')
I'm attempting to use the Ember.Array.filter method (http://emberjs.com/api/classes/Ember.ArrayProxy.html#method_filter). The filter seems to be working correctly, but now languagesFiltered returns a promise, and Handlebars can't handle that.
I tried one last alternative:
MyController.js
languagesFiltered: function() {
var languages = this.get('languages');
// "return languages;" works
// But "return languages.filter" returns an empty array
return languages.filter( function( item, index, enumerable ) {
console.log(item);
return true;
});
}.property('languages')
And console.log(item) never gets called. So my questions are:
What is the best way to implement the simple filter I'm after?
This is a read-only computed property, but what are best practices for handling async values in computed properties?
I'm using Ember 1.7.0-beta4, Ember Data 1.0.0-beta10, and ember-cli 0.44. I'd upgrade to Ember 1.7.0, but there's a small bug that affects another part of our app, so we're waiting until 1.7.1. Thanks for your input!
You can try returning a PromiseArray instead of just the promise.
You should be able to do something like..
languagesFiltered: function() {
// all of this returns a promise, but Handlebars can't handle the promise
var promise = this.get('languages').then( function( languagesArray ) {
return languagesArray.filter( function( item, index, enumerable) {
return item.get('name') !== 'English';
});
})
return DS.PromiseArray.create({
promise: promise
});
}.property('languages')
Now there are few better solutions. I use ember-promise-helpers.
So can keep your languagesFiltered code intact and do the following inside your hbs:
{{#each (await languagesFiltered) as|lang|}}
...
...
More – https://emberigniter.com/guide-promises-computed-properties/
Consider this situation. I have a common logic which I want to reuse across Ember.ArrayController and Ember.ObjectController instances.
Both Ember.ArrayController and Ember.ObjectController are derived from a basic Ember.Object so I am trying something like:
AbstractController = Ember.Object.extend({
// some methods with common logic
});
AbstractArrayController = AbstractController.extend({});
AbstractObjectController = AbstractController.extend({});
The problem is I also need AbstractArrayController and AbstractObjectController to extend from their parents (Ember.ArrayController and Ember.ObjectController).
How would I achieve this sort of inheritance?
I am looking at reopen and reopenClass methods right now, maybe they could be useful: http://emberjs.com/api/classes/Ember.Object.html#method_reopen
I tried just doing something like:
Ember.Object.reopenClass({
foo: function () {
return "foo";
}.property("foo")
});
But that doesn't seem to work.
Another way to put the problem:
App.HelloController = Ember.ObjectController.extend({
foo: function () {
return "foo";
}.property("foo")
});
App.WorldController = Ember.ObjectController.extend({
foo: function () {
return "foo";
}.property("foo")
});
How to abstract the foo computed property?
reopenClass adds methods on the class object, not the instance objects. When you do:
Ember.Object.reopenClass({
foo: function () {
return "foo";
}.property("foo")
});
You are creating Ember.Object.foo().
You need to use reopen if you want to methods at an instance level, for example Ember.Object.create().foo().
To answer you question, the best way to abstract a function that many types of objects can use is with a mixin. To create a mixin you use.
var mixin = Ember.Mixin.create({
foo: function() {
return 'foo';
}
});
And to have your objects take advantage of that mixin you can use.
var MyController = Ember.ObjectController.extend(mixin, {
// ...
});
More about mixins: http://codingvalue.com/blog/emberjs-mixins/ and http://emberjs.com/api/classes/Ember.Mixin.html
I have a variable in JS, which could be the currentPage for instance.
and now i would like to do something like this:
{{> currentPage}}
Which, of course does not work!
I would actually like to write a Handlebars helper like this:
Handlebars.registerHelper('currentPage', function(context, options) {
var currentPage = ...;
return Handlebars._defaultHelpers(">",currentPage);
}
But unfortunately ">" is not registered as a helper function in Handlebars and I don't know how to access this code.
I could also imagine using something like this:
Handlebars.registerHelper('currentPage', function(context, options) {
var currentPage = ...;
document.body.appendChild(Meteor.render(Template[currentPage]));
return "";
});
Which kind of works, but breaks the updating system.
If I return an HTML string, the template doesn't get updated anymore.
I think this is pretty common, but I don't know how to solve this.
Do it without > mark. This is the method renderPage helper in Router, or yield in Iron Router, are defined.
html:
{{currentPage}}
js:
Handlebars.registerHelper('currentPage', function(...) {
var currentTemplate = ...;
var templateData = ...;
return new Handlebars.SafeString(Template[currentTemplate](templateData));
});
You can omit the templateData part if you don't need it.
Below I have provided an example of what I 'think' should work, but does not. My expectation is that if a controller inherits from another controller, than it should be able to access provided behaviors in the parent class. I know that the same behavior can be achieved with 'needs', but I think it would be much cleaner if you could inherit behavior.
https://gist.github.com/4589210
You can alternatively use mixin. What it is? It is kind of multi inheritance.
App.Important = Ember.Mixin.create({
sharedBehavior: function() {
return "A winner is you!!!";
}.property()
});
App.OtherImportant = Ember.Mixin.create({
otherSharedBehavior: function() {
return "A winner is not you!!!";
}.property()
});
App.AnotherController = Ember.controller.extend(App.Important, App.OtherImportant, {
importantStuff: function() {
var ohBeehave = this.get("sharedBehavior");
if(ohBeehave) {
return ohBeehave;
} else {
return "FML";
}
}.property("sharedBehavior")
});
See http://emberjs.com/api/classes/Ember.Mixin.html
You are correct that controllers should be able to inherit properties from other controllers. Here is a working example based on your gist:
http://jsbin.com/uzeyum/1/edit
App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend({
sharedBehavior: function() {
return "A winner is you!!!";
}.property()
});
App.AnotherController = App.ApplicationController.extend({
importantStuff: function() {
var ohBeehave = this.get("sharedBehavior");
if(ohBeehave) {
return ohBeehave;
} else {
return "FML";
}
}.property("sharedBehavior")
});
That said, from experience I can tell you that inheritance is very rarely what you want. There are many reasons for this, see Prefer composition over inheritance? for detail.
By declaring an array of dependencies via the needs property rather than inheritance you will find over time that your application is less brittle and easier to test/change.