My Ember component JS looks like below;
row = {};
Ember.set(row[my.constants.fieldKey], "cssType", 'leftPadding')
and my component HBS looks like below;
{{my-field cssType=(get row (concat (my-field-key 'SECTION_ID' 'FIELD_ID') '.cssType'))}}
To summarize, I only wanted to understand how can I achieve the equivalent of following JS code in hbs dynamically ?
row['my-field-key'].cssType
Your composition of get and concat template helpers is absolutely fine. I've setup an ember-twiddle to verify that this approach is working. You could find it here.
You might have an issue with your my-field-key template helper but it's hard to tell cause that code is missing. Also a reproduction in an ember-twiddle would be very helpfull.
Related
my problem is the following:
I want to create some vue elements like this:
var rRow = document.createElement('rightrow');
rightRow is a vue Element and should be importet like this:
<rightRow></rightRow>
As I look into Chrome Developer Tools, the HTML code looks as it shoukd be, but the vue element isn't there. If I insert it 'by hand'(just write where it should be) it works, but I need it more often. Thanks to every helping hand :D
Sorry if my english isn't the best. I'm no native speaker xD
EDIT:
In my Chrome-Developer-Tools the component can be seen. I just need to know how I can render it again because the text is right but the Vue-View isn't
Vue uses the ES2015 class sytax and can instantiated via their constructors.
import RightRow from "./RightRow.vue"
const rrow = new RightRow();
I needed to know the current route name so I can show or hide a global component that is created on my application.hbs.
This component should be hidden in just one route template, so this looks like the easier solution to me. Getting the current route name and if its equal "posts" it will not show the header-bar component.
Something like this:
{{#if currentRoute != 'login'}}
{{header-bar}}
{{/if}}
{{outlet}}
Any idea on could I achieve this or something similar that solves my problem?
applicatiion controller has a property names currentRouteName. You can use it.
If you want to use in another template you need to define that in controller.
test.js (controller)
init(){
this._super(...arguments);
let appCtrl = Ember.getOwner(this).lookup('controller:application');
this.set('appCtrl', appCtrl);
}
test.hbs
{{appCtrl.currentRouteName}}
Same answer as Ebrahim Pasbani.
This syntax is still usable in latest Ember version:
App.__container__.lookup('controller:application').currentRouteName;
I'm having issues accessing input values within my component. I'm trying to dynamically create value bindings in my templates and accessing in the conponent.js file using this.controller.get("pst"+id) however the result is underfined. Using Ember 2.2
{{#each post in |pst idx|}}
{{input value=(concat 'pst' idx)}}
{{/each}}
Well, it works as expected, but why would you want to do this?
Please explain what you want to archive and then we can help better.
And to be clear, a value generated with the get helper is immutable.
Why not do something like {{input value=pst}}?
If this is not an option probably you should build your array in JS and use that then in handlebars!
Define a computed property that wraps your 'post' variable in your component.js file. Iterate over that wrapper. I think this is a powerful way of generating dynamic values.
Your template:
{{#each postWrappers as postWrapper}}
{{input value=postWrapper.value}}
{{/each}}
Your component.js:
postWrappers : Ember.computed('post', function() {
//your concat code
});
I am using ember 2.0 with ember-cli. All the other answers that come close to addressing this all use deprecated methods.
Currently I have some code that looks like this inside a component called object-form that I use in several places:
saveObject(newObject) {
newObject.save().then((object) => {
this.$('.success-message')
.html('Object "' + object.get('name') +
'" successfully added.')
}
}
This works fine, but now I'd have to also have something like:
$('.success-message').append('{{link-to object.name "object.show" object}}')
However, as expected, the text is added exactly as written instead of being added as an actual {{link-to}} helper.
In angular, which I'm more familiar with, you used something called the $compile service to dynamically add directives, the equivalent of ember components.
If link-to existed in angular, for example, the pseudocode would look like something like this:
var directive = $compile('<link-to ng-href="/object/{{object.id}} ng-model=object">{{object.name}}</link-to>')($scope);
$('.success-message').append(directive);
So is there an equivalent method of parsing the handlebars inside a string you want to append?
Instead of dynamically appending the {{link-to}} it makes much more sense to just put it under an if statement, which behind the scenes is really doing the same thing I intended.
I have a pageTitle template variable that is in the header element () of each section of my site, and I would like it to be dynamic, rather than hard-coded, so site maintenance is easier.
Using Meteor (I'm currently reading Discover Meteor), would it be best to put it in a Session variable, and then return the value from a Template helper (i.e. as in the example in the Session chapter of Discover Meteor), or is there an Atmosphere package that would handle this better?
Also, if I do put it in a Template helper, I'm a little fuzzy about where is the appropriate file in which to put the helper. That is, if I have a .js file for (almost) every template (because I'm following along with the book), would I really need to put the same helper code that returns the pageTitle variable from the Session in each template's .js file?
It seems inefficient to have so many redundancies, but if I had a single instance of that Template.templateName.helper() code, I'm not sure where to put it.
Any help is much appreciated. Thanks!
I'd put it inside a global helper. You can use Template.registerHelper for that. I usually put these helpers inside client/helpers/global.js. I'm not sure why you would want to use a session variable for this. But here's a simple example of how this helper could look like:
client/helpers/global.js
Template.registerHelper('setPageTitle', function (newTitle) {
document.title = newTitle
})
Usage:
{{ setPageTitle 'Hi' }}
I'm also fairly new to Meteor, but it looks like you could use the Observe Collection from the docs - http://docs.meteor.com/#/full/observe and have a collection with your pageTitles in it.
So it would be something like
document.title = yourCursor.observe(function({
changed: function(id, field){return field.pageTitle}
})
As for location, anywhere on the client side should work.
Not sure if this is best way to do it, but hope it helps!