I am trying to use ember to show a dynamic list of found content. The problem is that when I try to put handlebars in html attributes, everything breaks.
RegApp.PatronsFound = Ember.CollectionView.create
tagName: 'table'
content: []
itemViewClass: Ember.View.extend
template: Ember.Handlebars.compile("<td><button onclick='alert({{content.id}})'>{{content.name}}</button>")
RegApp.PatronsFound.appendTo('body')
When it is fed a piece of content with the ID of 3 and the name FOO, I want this html to be generated:
<button onclick="alert(3)">FOO</button>
Instead, I get this:
<button onclick="alert(<script id=" metamorph-4-start'="" type="text/x-placeholder">3<script id="metamorph-4-end" type="text/x-placeholder"></script>)'>FOO</button>
You can use
{{unbound content.id}}
to arbitrarily insert values into your templates. Normally, such values are wrapped in metamorph tags which allow the displayed value to be bound to the backing value, and updated whenever the backing value changes. This only works if the output is regular HTML, not, in this case, spanning event handlers and embedded JS. {{unbound}} inserts the value at that property path once, without metamorph tags, and without being updated if that value changes in the future.
Related
This Ember template code...
<div class="detail bedrooms">
<span>Number of bedrooms:</span> {{rental.bedrooms}}
</div>
<div class="detail temperature">
<span>Current Temperature:</span> {{city-temperature location=rental.city}}
</div>
...results in this rendering...
How could one get the "25C" text to render on the same line as "Current Temperature" in the same way that "San Francisco" is on the same line as "Location"?
I have tried getting the city-temperature component to return only text, but (secondary question here) is it even possible for a component to return only text if the text is from a remote ajax request since the promise seems to need a DOM element to append to?
This Ember app is available here on GitHub. It's a modified version of the official Ember.js tutorial app with this "Current Temperature" detail added.
The problem is that; city-temperature is a component; and by default ember components is assigned div as their tags. Due to this; the content of city-temperature starts at a new line.
What can you do? Play with css and make sure div tag of city-temperature does not start at a new line; but instead floating right within the owner div. The second option is making city-temperature component tagless; so that it does not start at a new line. To achieve that; you can just declare:
tagName: ''
within city-temperature.js. You can see the following twiddle to see the second option I mentioned.
After reading your comments; I have forked your repository and made minor modifications to achieve what you want. You can check my repository and my corresponding commit to see what I changed.
Basically; I really did not like the idea that weather service is returning a DOM element. I have changed it to return an instance of ember promise (I mean Ember.RSVP.Promise). Within city-temperature.js I just set a retrieved weather value from weather service and set it to the component instead of making DOM modification. Finally; I modified city-temperature.hbs to render weatherValue and added a simple css item in order to prevent weather-container div to insert a new line break.
I am not sure; whether you will like my solution or not; but I guess you will retrieve the visual appearance you want. You can always rely on promises for async tasks; you do not need to create DOM elements and pass them around to components and append them to somewhere within DOM tree of the corresponding component. I believe one of the reasons we are making use of a framework like Ember is to prevent such DOM modifications. Best regards.
An ember component adds a div by default. If you don't want to add this div tag, you need to set tagName to an empty string.
That's called tagless component.
Further, for your case, you can give a tagName='span' so you will not need a span in your template.
export default Ember.Component.extend({
tagName: 'span',
classNames: ['weather-container'],
weather: Ember.inject.service(),
//rest of your code...
});
By default, Limesurvey provides the follow text elements for the surveys - Survey title, Description, Welcome message, End message etc, which I can use in my template with tags like {SURVEYNAME}, {SURVEYDESCRIPTION}, {WELCOME} etc.
Is it possible to add my own custom field, which I can then use in the template? I need to do it this way because I need to have the text translatable, and present on every page.
You can not add a custom replacement with the current version of LimeSurvey. And your LimeSurvey version seems outdated. But LS includes jquery, therefore it's easy to move some element from a place to elsewhere.
Quick example:
<p>Here is your description</p>
<div style='display:none'>
<label for='languagechanger' id='labellang'>Here is the new label for language</label>
</div>
<script>
$(function() {
$("#labellang").insertAfter("#languagechanger")
});
</script>
A PHP solution, hacking LimeSurvey code, should be placed at https://github.com/LimeSurvey/LimeSurvey/blob/master/application/helpers/replacements_helper.php#L814
I am using a third party indexing service (Swiftype) to search through my database. The returned records contains a property called highlight. This simply adds <em> tags around matching strings.
I then bind this highlight property in Ember.JS Handlebars as such:
<p> Title: {{highlight.title}} </p>
Which results in the following output:
Title: Example <em>matching</em> text
The browse actually displays the <em> tags, instead of formatting them. I.e. Handlebars is not identifying the HTML tags, and simply printing them as a string.
Is there a way around this?
Thanks!
Handlebars by default escapes html, to prevent escaping, use triple brackets:
<p> Title: {{{highlight.title}}} </p>
See http://handlebarsjs.com/#html-escaping
Ember escapes html because it could be potentional bad code which can be executed. To avoid that use
Ember.Handlebars.SafeString("<em>MyString</em>");
Here are the docs
http://emberjs.com/guides/templates/writing-helpers/
if you've done that you could use {{hightlight.title}} like wished,...
HTH
I have the following code in an Emblem.js template:
each segment in controller
.panel.panel-default
.panel-heading
h4.panel-title
a data-parent="#accordion" data-toggle="collapse" href="#collapse{{segment.id}}"
span {{segment.title}}
div id="collapse{{segment.id}}" class="panel-collapse collapse in"
What I'm actually trying to achieve is to interpolate object data into the HTML attributes. I been trying to {{segment.id}} but that render some script tags along with the value which is not what I'm looking for. Is there another way to do this?.
Until HTMLBars comes out, Ember.js is going to need to insert placeholder tags to manipulate the DOM. You have two options:
Create a computed property that will join the strings for you, then use bind-attr to apply the property to the ID or class.
Use the unbound helper. This will do what you want, but it won't update the property if it changes.
I suggest doing the first if you can.
if the data isn't going to change, you can use unbound and it'll just jam it in there without script tags.
each segment in controller
.panel.panel-default
.panel-heading
h4.panel-title
a data-parent="#accordion" data-toggle="collapse" href="#collapse{{unbound segment.id}}"
span {{segment.title}}
div id="collapse{{segment.id}}" class="panel-collapse collapse in"
Is there a way to strip binding tags from an ember.js infused handlebars template? I would like to be able to extract just the html without any of the metamorph script tags.
I have this related question but wanted to ask this more general question as well.
You can use the unbound Handlebars helper to do this at the individual property level.
There is work being done on an #unbound block helper, which would be nice for what you're trying to do: https://github.com/emberjs/ember.js/pull/321
Another approach is to, in your views, specify a plain Handlebars template. None of the output will be bound.
App.UnboundView = Ember.View.extend({
template: Handlebars.compile("output is: {{msg}} here"),
msg: "not bound"
});
Here's a jsFiddle example: http://jsfiddle.net/ebryn/zQA4H/
Here's a better way
{{unbound propertyName}}
http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_unbound
In case anyone needs this functionality, I created a small jquery plugin to do it:
# Small extension to create a clone of the element without
# metamorph binding tags and ember metadata
$.fn.extend
safeClone: ->
clone = $(#).clone()
# remove content bindings
clone.find('script[id^=metamorph]').remove()
# remove attr bindings
clone.find('*').each ->
$this = $(#)
$.each $this[0].attributes, (index, attr) ->
return if attr.name.indexOf('data-bindattr') == -1
$this.removeAttr(attr.name)
# remove ember IDs
clone.find('[id^=ember]').removeAttr('id')
clone
Still hoping there is a better way.