For instance, is there a way to nest my "i18n" helper inside another helper's hash variable?
{{view "SearchView" placeholder="{{t 'search.root'}}" ref="search" url="/pages/search" className='home-search' polyfill=true}}
Update: Handlebars now supports subexpressions, so you can just do:
{{view "SearchView" (t 'search.root')}}
Your scenario is not directly supported, but there a couple of workarounds you can use. The handlebars helpers are just javascript code, so you can execute them from within the helper code itself:
function translateHelper() {
//...
}
function viewHelper = function(viewName, options) {
var hash = options.hash;
if(hash.placeholder) {
hash.placeholder = translateHelper(hash.placeholder);
}
};
Handlebars.registerHelper('view', viewHelper);
Handlebars.registerHelper('t', translateHelper);
And just pass the i18n key to as the argument:
{{view placeholder="search.root"}}
This is nice, as long as your helper knows which arguments should be localized, and which not. If that is not possible, you can try running all the helper arguments through Handlebars, if they contain a handlebars expression:
function resolveNestedTemplates(hash) {
_.each(hash, function(val, key) {
if(_.isString(val) && val.indexOf('{{' >= 0)) {
hash[key] = Handlebars.compile(val)();
}
});
return hash;
}
function view(viewName, options) {
var hash = resolveNestedTemplates(options.hash, this);
}
And use the nested template syntax you described:
{{view placeholder="{{t 'search.root'}}" }}
I realize neither of these options are perfect, but they're the best I could think of.
Related
I'm changing the value of a property in my controller and the helper fails to recompute them.
Sample code here:
My template looks like,
{{#if (my-helper info)}}
<span>Warning</span>
{{/if}}
In my controller,
changeAction: function() {
let that = this,
info = that.get("info");
set(info, "showWarning", true);
}
my helper,
import { helper as buildHelper } from '#ember/component/helper';
export default buildHelper(function(params) {
let that = this,
info = that.get("info");
if(info.showWarning ) {
return true;
} else {
return false
}
});
I see several issues with your code:
The template helper seems to get an object as it's first and only position param: {{my-helper info}} while info is { showWarning: true }. A template helper does recompute if the value passed it changes but not if a property of that value changes. A quick fix would be {{my-helper info.showWarning}}.
In your template helper your are trying to access the property on it's this context. As far as I know that's not supported. As you are using a positional param and it's the first one, it's available as first entry inparams array. So your template helper should look like:
export default buildHelper(function([info]) {
if(info.showWarning ) {
return true;
} else {
return false
}
});
What version of Ember are you using? If it's >= 3.1 you don't need to use this.get() in your controller. If you are using Ember < 3.1 you need to use info.get() also in template helper.
But as described before I would not recommend passing an object to a template helper as it's only updated if the object itself is replaced. Changing a property of it is not enough. You might be able to do so using Class-based Helpers but I wouldn't recommend to do so as it's error prune.
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 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.
I want to get handlebarjs template name using handlebar helper, how to do it? thanks! for example,
give:
a.hbs
<p>hello</p>
{{fileName}}
I want:
a.html
hello a
I think that the easy and the safe way, is to get the template of the current view.
And get your name, based in the identity, using Ember.TEMPLATES.
Since the TEMPLATES structure is { templateName: compiledTemplate }.
Ember.Handlebars.registerHelper('filename', function(options) {
var template = options.data.view.get('template');
for (var templateName in Ember.TEMPLATES) {
if (Ember.TEMPLATES[templateName] === template) {
return templateName;
}
}
});
Live demo http://jsbin.com/ucanam/674/edit
is there a way in registerHelper to get the content of a block?
Lets assume we have the following template:
{{#myif test}}thats the content i want to have{{/myif}}
And the following registerHelper Code:
Ember.Handlebars.registerBoundHelper('myif', function(test)
{
// do something
return <content of handlebars block>;
});
Many thanks!
Handlebars provides the nested block to the helper as options.fn, where options is the last argument of your helper. You can invoke this block with a context object which is where that block will pick up values from.
To pass the context of the helper itself you can call it with this.
In this case you will probably also want options.inverse which is an optional block that will be used if your condition is false.
Ember.Handlebars.registerHelper('myif', function(condition, options) {
if (condition) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
And the subsequent use in the template,
{{#myif condition}}
true block here
{{else}}
else block here
{{/myif}}