When dynamically adding an element to the DOM, is it possible to add a binding to it?
var element = $('#div1').after('<span></span>');
element.data("name", ???); // create binding equivalent to data-name="{{Name}}"
I know that I could use ractive.observe() to watch changes to the keypath and update the element accordingly, but the binding syntax is more concise so I'm hoping I can still leverage it.
Here's a JSFiddle that shows how I'm using ractive.observe().
Related
I've a linkedhashmap that I put into Properties file, and it shows the fields in the menu. I've an others color option and I want it to be seen at the end.
So colormap is my linkedhashmap and I put others the end. So when I look inside colormap, last element is Others. But changes when I put it in properties file.
My code is like this:
colormap.put("Others",Color.GRAY);
Properties prop = new Properties();
prop.putAll(colormap);
And order changes inside prop. Do you have any idea how to solve this problem?
The java.util.Properties type inherits from java.util.Hashtable and there is no guarantee that the table will retain its order even after you've loaded the properties.
to fix that you can use OrderedProperties
I'm using Polymer and I am encountering a Problem. I think there is a good solution, but I still don't have the perfect understanding of polymer.
In my template I get a dom-repeat which gets me some _itemsas item. item.name returns the name of the item, it works just fine. Now I want to use this name to display it in a tooltip, so I call the function on-mouseenter="_showTooltip".
My function looks like this:
_showTooltip: function(e) {
var item = Polymer.dom(e).rootTarget;
//........here I get Information out of my item to use it in my tooltip and display it
}
How can I transfer the information of my original item to this function?
Thanks in advance!
You did not mention or tag which version of Polymer you're using so I will point you to the docs for Polymer 2 because that's what I use, but I am guessing something similar must exist for Polymer 3 also.
Any event triggered from elements rendered inside a dom-repeat will get a model key added, under which you will have the context, so you will have your item from HTML there.
You can see that in the docs here.
To start you can try to:
_showTooltip: function(e) {
var item = Polymer.dom(e).rootTarget;
//........here I get Information out of my item to use it in my tooltip and display it
console.log(e.model); debugger;
}
and continue from there..
I'm trying to create a form Polymer component where form elements are generated on the fly. I've looked, and so far the only way to bind the value attribute is by using .injectBoundHtml. This does not work with all component types, I'm trying to bind the value of a <textarea>, and this is what I get:
Removing disallowed attribute <TEXTAREA value="{{ results[ "comments" ] }}">
My work around was to add: textareaID.addEventListener('change', updateValueMap)
I'm hoping someone could tell me why value is disallowed, and/or if there is a better way to programmatically assign bound attributes in Polymer. Please :)!
Thanks to Gunter's suggestion, and passing a node validator:
var val = new NodeValidatorBuilder.common()
..allowElement('textarea', attributes:['value']);
this.injectBoundHtml(getElementStr(i), element:selP, validator:val);
Textarea doesn't have a value attribute.
Try this instead
<textarea>{{results['comments']}}</textarea>
For more information about the message Removing disallowed attribute see How to create shadow DOM programmatically in Dart?
I'm trying to bind the background-img: url('') property in a WinJS application.
I've got a view model property which is set to something dynamic like:
'images/' + myObject.name + '.jpg'
But I'm unsure how to use data-win-bind to set said property to the css property background-img: url(''); correctly.
My template is currently set like this:
<div class="item" data-win-bind="style.backgroundImage: backgroundImageUrl">
Where backgroundImageUrl is my view model property, but this does not seem to setting things correctly.
Any ideas as to how to bind to these properties?
Your data-win-bind syntax looks correct. So there could be two possibilities.
First, make sure you've called WinJS.Binding.processAll. That's necessary to set the binding context and set up the bindings described by data-win-bind attributes. Nothing happens without it.
Second, the value of the source's backgroundImageUrl must be a string in the form that CSS expects, that is, "url('')". It can't just be the relative path itself, like you would use with an img.src target.
To do this, either make the source's property in that form, or use a binding initializer/converter to add the url('') part automatically. For more on that, I suggest looking at Chapter 6 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, with the general data-binding discussion starting on page 299 and the initializer stuff starting on page 315.
how can i set style attribute in code behind c#?
thanks
niall
Basically like this
Control.Style.Add("background-color", "red");
Or like this for any other attribute:
Control.Attributes.Add("style", "color: red;");
A user control isn't directly converted to a single HTML object - it is a collection of objects grouped together, therefore you can't set its "style".
If you want to hide it, then it should have a Visible attribute which you can set to false, however, this means that it won't be rendered to the page at all, and so subsequently can't be made visible in client code.