I want to render a HTML entity as value into an input field, e.g. m².
For simple demonstration purposes I have tried it out with a view representing the input field, but the standard input helper has the same behavior. The initial rendering works fine, but if the bound value is updated, then suddenly the superscript value is escaped. Thus m² changes to ³, it should be m³.
Here you can see the code in action:
http://emberjs.jsbin.com/vifup/3/edit
I find it strange that the set call in init works fine, but the update on click does not work.
Is this a bug and are there any workarounds?
I found the answer myself. I think the issue arises when setting the value via jQuery. jQuery seems to escape the HTML-Entities before setting them using $.val(). Ember seems to use $.val() in the background.
The simple yet not very nice solution I found is explained here:
http://www.objectpartners.com/2012/07/10/dynamic-html-entities-in-form-inputs/
In short, set the new value containing HTML-Entities to a temporary DOM node as html and retrieve this html again using $.html(). Then set it for the input using $.val()
var new_value = $('<div></div>').html('m²').html();
$('input').val(new_value);
Related
I have a web-page that has an embedded Leaflet map. I've managed to create a drop-down for the user to select different maptile types from Maptiler.com. This worked fine with the maptile address being passed as context from the view which was then specified in my template as follows:-
L.tileLayer('{{ context.maptileaddress }}', {attribution: '© MapTiler © OpenStreetMap contributors',}).addTo(map);
I then decided that I might like to use other maptile providers such as Stamen and that would require me to pass the whole tilelayer argument as follows:-
L.tileLayer('{{ context.maptilefullkey }}).addTo(map);
where a valid 'maptilefullkey' is:-
'https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',
subdomains: 'abcd',
minZoom: 1,
maxZoom: 18,
ext: 'png'
}
When I embed this text literally into the tileLayer method, the maptile displays just fine - see my print.
The maptile works fine when it is hardcoded into the the tileLayer() method
You can also see that I have successfully passed
{{ context.maptilefullkey }} to the template and it has printed at the bottom of the webpage successfully. It apparently matches the valid key exactly.
But when I pass it as a variable L.tileLayer({{ context.maptilefullkey }}).addTo(map);, the maptile completely disappears.
Why has this happened and how do I fix it?
Is the fact that the string ends in curly bracket and then precedes the double curly bracket that closes off the context creating a problem?
Or is it the attribution that is causing an issue?
The help from this community is much appreciated!
Phil #anoobinneed
I have managed to work this out in the end. It's all part of me being fairly new to this.
I needed to add the tag "safe" to where the fullkey is being picked up from:-
L.tileLayer({{ context.maptilefullkey | safe }}).addTo(map);
It worked previous when just the tileaddress was being passed but clearly the fullkey had an "unsafe" character or characters and I needed to instruct the template to pass the string exactly as it is.
This is explained quite well in the documentation:-
https://docs.djangoproject.com/en/3.0/howto/custom-template-tags/
I hope this may help someone in the future.
Phil
I am using angular dart to create a web application.
I have a page where i use material input to get input from the user. in that, i need to have a default initial value in the text box as soon as the page is loaded.
I don't want to bind the input to any variable as this is just a one time use and i will not need binding from component to template after this.
is there a way to specify default/initial value for 'material-input' in dart?
You're probably looking for hintText.
<material-input hintText="Initial value">
</material-input>
From the notes above:
<material-input [ngModel]="value">
Was the solution he used. This will push the value into the input without having it be a two way variable. Nate's suggestion of using hintText is also a good use of this.
I'm using this x-editable plugin (https://vitalets.github.io/x-editable/demo-bs3.html) and specifically the "Custom input, several fields" located towards the bottom of the demo.
First, everything is working just fine on the implementation but I'm struggling with how to save the submitted data (see screen shot below further down). I don't know how to reference value[address1] in my sql statement without Lucee thinking its a structure (I hope that makes sense in what I'm trying to say here). When I try to reference the variable reports via writeDump(form.value[address1]), Lucee provides me the following error:
key [value] doesn't exist
How do I reference form fields in the image? Should I change how the data is being submitted perhaps using jQuery's serialize() method?
It was much easier than I thought. I didn't even know you could do this!
local.address1 = form['value[address1]'];
Thanks to the comment made by #Matt-Busche in the SO question, ColdFusion Variable Name with brackets.
tagName: 'img' produces `<img></img>`.
Is there a way to prevent this? I know I could just create a div and put the img inside, but creating the img right away is more convenient for me and I dont need to create any template for the component.
Thanks for any input.
I found this issue which indicates that the ember core team is aware of the behavior for self closing tags but probably will not change this behavior before Ember 2.0.
See the quote by #trek in the issue I've linked to:
The documentation is accurate. This is just a bug that hopefully we
can address in 2.0. I'm closing this particular issue since it was re:
docs. I know #mmun and #mixonic are aware of this general problem.
I wouldn't worry too much. I'll quote #mixonic from the same issue:
This is correct, a view that is based on a self-closing DOM node
cannot by definition contain more DOM
So it doesn't seem that anything will be accidentially inserted between the opening and closing tags.
I am trying to use a fairly simple Handlebars helper within an #each loop going over the items in a controller's model (it's a collection of models supplied by EmberData using the fixtureAdapter). Here's the basic layout of the template:
{{#each}}
....
{{#each clusters}}
<span>{{prettifyTimestampTime cluster_timestamp}}</span>
{{/each}}
{{/each}}
Here is my helper (in coffeescript):
Ember.Handlebars.registerBoundHelper 'prettifyTimestampTime', (timestamp, options) ->
d = new Date timestamp
hours = String(d.getHours() % 12)
hours = "0#{hours}" if hours.length is 1
"#{hours}:#{d.getMinutes()}:#{d.getMinutes()}"
I originally set this helper on Handlebars itself with Handelbars.registerHelper, but I kept getting the string "cluster_timestamp" passed in (no matter what I put after prettifyTimestampTime in the template, it would get resolved to a String).
I then followed suit and attempted to give stukennedy's answer a try by wrapping the property in quotes and doing a lookup on options.data.keywords, but the key wasn't in that dictionary.
When I to tried to use Ember.Handlebars.registerBoundHelper instead, per Bradley Preist's suggestion here, the timestamp argument is simply undefined. I do notice that, when I try to access any properties on options.contexts[0], the values they point to are undefined, but the keys are there.
I feel completely lost at this point. Any direction is welcome. Is this really a known bug in Ember, as stukennedy has pointed out in the previous SO questions? Having just started with Ember and Handlebars, I would rather have this just be some dumb error on my end, considering how difficult it was for me to also to set up fixtures with Ember data in the first place. :-P
EDIT: After seeing this question, I realize why registerHelper did not work (because it does not try to associate what is passed in with the property of the current object in context). However, I'm still just as lost since the lookup of the property isn't working. Perhaps this is an Ember Data issue with promises? The only thing that makes me confused about that being the case is that I am using fixtures (no request made), and I am able to get at the property cluster_timestamp normally with a normal expression like {{cluster_timestamp}}.
don't use registerHelper, http://emberjs.com/guides/templates/writing-helpers/
Ember.Handlebars.helper 'prettifyTimestampTime', (timestamp, options) ->
d = new Date timestamp
hours = String(d.getHours() % 12)
hours = "0#{hours}" if hours.length is 1
"#{hours}:#{d.getMinutes()}:#{d.getMinutes()}"