I have an Ember view with the currentUrl property; this property gets the value when the view is called, like this:
{{view App.MyView currentUrl="www.website.com"}}
and in the view's template i have something like this:
<a href="{{view.currentUrl}}">
but this does not work because the output of handlebar expression is:
<script%20id='metamorph-4-start'%20type='text/x-placeholder'></script>www.website.com<script%20id='metamorph-4-end'%20type='text/x-placeholder'></script>
and not only www.website.com as I would like; do you know how can I get an output without the HTML?
Perhaps you can use the {{unbound}} helper here.
<a href="{{unbound view.currentUrl}}">
or the {{bind-attr}} helper
<a {{bind-attr href="view.currentUrl"}}>
depending if you want the property to be live updated (bind-attr) or not (unbound)
Related
I have an Ember template that is rendering text with a Handlebar expression, i.e. {{caption}}. The text being rendered has hashtags in it, each of which I need to make clickable, and going to a specific route in the Ember app.
I created a helper to parse the text and replace each hashtag with a link to the necessary route combined with the hashtag, so now the Handlebar expression looks like: {{clickable-hashtags caption}}. However, the helper creates the links using regular HTML <a href> tags, and this is returned using Ember.Handlebars.SafeString.
I would like to use Ember's {{#link-to}} helper method for each hashtag instead, but can't seem to figure out how to do that. Is it possible for Handlebars to parse out the link-to tags within the template's {{caption}} expression?
Well, you could do it with an computed property
The caption:
This is my #hashtag caption
In controller:
computedCaption: function () {
var words = caption.split(" ");
return words.map(function (e) {
var isHashtag = e.charAt(0) === "#";
return {isHashtag: isHashtag, text: e};
});
}.property("computedCaption")
Template:
{{#each computedCaption as |cap|}}
{{#if cap.isHashtag}}
{{#link-to 'tags' cap.text}}{{cap.text}}{{/link-to}}
{{else}}
{{cap.text}}
{{/if}}
{{/each}}
Result
This is my #hashtag
caption
JS Bin: http://emberjs.jsbin.com/kohubu/1/
Computed properties # Emberjs
The problem I see with doing it that way is not being able to bind variables (and helper results) to the link-to helper. The work around I would use would be to use actions and to move your helper logic into the controller.
Define the transitionTo action in the application route:
App.ApplicationRoute = Ember.Route.extend({
events: {
transitionTo: function (route) {
this.transitionTo(route);
}
}
});
Template:
{{#each item in controller.captions}} <!-- or instead use model-->
<li>
<a {{action 'transitionTo' item.route}}> <!-- without hashtags -->
{{item.label}} <!-- with hashtags -->
</a>
</li>
{{/each}}
Have you considered doing client-side HTML compilation?
I'm thinking you'll need to install the necessary helpers (i.e. link-to) and pass in variable values. This test may be of some help getting there.
I have a view with the following:
App.MyView = Ember.View.extend({
isSet: false,
layoutName: 'myview',
click: function() {
this.set('isSet', !this.get('isSet'));
}
};
And the template for it:
<i {{bind-attr class=":fa isSet:fa-check"}}></i> Toggle
The click event is working fine, and updates isSet (I can see that in ember inspector), but the bound class does not get added. Is there something wrong in my logic?
Use view.isSet instead of isSet in your template.
<i {{bind-attr class=":fa view.isSet:fa-check"}}></i> Toggle
Another possible solution, not to the OP's problem but to one with a similar title.
When using bind-attr to bind property changes and element class, it is important to include also static class mapping inside the bind-attr helper and not in a separate, static, class attribute.
This will not always work:
<div class="round" {{bind-attr class="highlighted:hl"}}>Inner text</div>
The correct way is:
<div {{bind-attr class=":round highlighted:hl"}}>Inner text</div>
If you are using above ember 1.11
then use the below tag
Reference :
http://www.hutchinson.io/bind-attr-is-dead/
I have following issue here:
<ul class="aClass">
{{#if something}}
<li>{{#link-to "blub" bind-attr data-testid=aID}}{{loc "blub"}}{{/link-to}}</li>
{{/if}}
</ul>
so i want to have an element(the link-to is rendered to ...) in the resulting element with the id aId. But the element does not contain the wanted id in the rendered HTML. something like this:
...
any ideas?
In Ember, bind-attr shouldn't be used inside of your link-to help as that should only be used inside of html elements:
<a {{bind-attr href=myLink}}>My Link</a>
Inside of Handlebars helpers, you just define the property directly.
{{#link-to "blub" data-testID="aID"}}{{loc "blub"}}{{/link-to}}
The attribute is not rendered into the HTML if the quotes are missing.
But you also need to reopen the LinkView:
Ember.LinkView.reopen({
attributeBindings: ['data-testID']
});
See similar question here.
And the Ember docs here.
Try using quotes:
{{#link-to "blub" bind-attr data-testid="aID"}}{{loc "blub"}}{{/link-to}}
A lack of quotes will cause Ember to try a property lookup on the current view context, instead of just spitting out a string as you'd like it to.
here is what I'm trying to do:
I want to create a tree widget in emberjs that will look like:
{{view UI.TreeView content="App.rootNode"}}
{{name}} //-> content of each node, it could be <img src="{{icon}}" /> {{name}}
{{/view}}
The problem I'm facing is how to use the inner template in my itemViewClass.
Here is what I came up with so far: http://jsfiddle.net/YJ7zM/13/
Relevant line:
template: Em.Handlebars.compile("{{name}} {{view UI.TreeChildrenView contentBinding=\"children\"}}")
That's the line I don't like and would like to replace with something more like:
templateBinding: "parentView.template"
The problem is that "parentView" will only work for the first level of the tree, for the other ones it would be "parentView.parentView.template" and so go.
You could always define the template externally and use templateName...
http://jsfiddle.net/YJ7zM/14/
edit
Revised to address first comment. http://jsfiddle.net/ud3323/mgCva/
Is there a way to dynamically inject partial templates (and have it work the same way in both Ruby & Javascript)? Basically, I'm trying to render different types of objects in a list.
The best I can come up with is this:
<div class="items">
{{#items}}
<div class="item">
{{#is_message}}
{{> message}}
{{/is_message}}
{{#is_picture}}
{{> picture}}
{{/is_picture}}
</div>
{{/items}}
</div>
I'm not super-psyched about this approach.
Is there a better way?
Also note that the different types of models for the views can have non-similar fields. I suppose I could always go to the lowest common denominator and have the data hash contain the html, however I would rather use the mustache templates.
I did the same thing you did, and for each property type i needed a dynamic partial, I just set a dynamic variable in the js data model that's being rendered in the template...
eval("this.set({is_" + this.get("propertyType") + ": true})")
or
this["is_" + propertyType] = true
At least I don't have to manually set the 'is_whatever' variable...
It would be cool if mustache.js or ICanHaz.js had some clever syntax for dynamic properties inside of mustache tags... maybe something like this:
{{>{{message}} }}