In Polymer 0.5 I could do this
public action(event, detail, sender){
var help = sender.getAttribute('data-action');
// do something with this value
}
I got this value in Polymer 1.0 too. But I think this is not the official
method
detail.sourceEvent.path[2].getAttribute('data-action')
Can somebody show me the official way ?
I got the solution. Just write:
event.currentTarget.getAttribute('data-action')
Related
Is there any dirty flag in the Kendo-Grid? In the old JQuery version there was one, but in the Angular version I don't see anything like that: https://www.telerik.com/kendo-angular-ui/components/grid/
And if no, how can I get to know about changes?
As far as I know, trackBy is something you could use in that case.
I guess you could find the following link helpful
https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-trackby
Please make a demo if you like to see if it works for you and check more things.
The data items has a dirty field.
var grid = $("#grid").data("kendoGrid");
var data = grid._data;
$.each(data, function (index, item) {
if(item.dirty)
{
// do something
var foo = "kung";
}
});
I was wondering if it was possible to pass a function foo() as an attribute func="foo()" and have it called this.func() inside of the polymer element?
<foo-bar func="foo()"></foo-bar>
Polymer({
is: 'foo-bar',
properties: {
func: Object,
},
ready: function() {
this.func();
}
});
I've been trying to get this working for ages with no luck.
Thanks in advance.
<foo-bar func="foo()"></foo-bar>
Polymer({
is: 'foo-bar',
properties: {
func: {
type: String, // the function call is passed in as a string
notify: true
},
attached: function() {
if (this.func) {
this.callFunc = new Function('return '+ this.func);
this.callFunc(); // can now be called here or elsewhere in the Polymer object
}
});
So the trick is that "foo( )" is a string when you first pass it to the Polymer element. I fought with this for a while as well and this is the only way I could find to get it done. This solution creates a function that returns your function call, which you assign as the value of one of your polymer element properties.
Some people might say you shouldn't use the Function constructor because it is similar to eval( ) and.... well you know, the whole 'eval is evil' thing. But if you're just using it to return a call to another function and you understand the scope implications then I think this could be an appropriate use-case. If I'm wrong I'm sure someone will let us know!
Here's a link to a nice SO answer about the differences between eval( ) and the Function constructor in case it can help: https://stackoverflow.com/a/4599946/2629361
Lastly, I put this in the 'attached' lifecycle event to be on the safe side because it occurs later than 'ready'. I'm not sure if an earlier lifecycle event or 'ready' could be used instead of 'attached'. Perhaps someone can improve this answer and let us know.
Before Polymer 0.8 we were able to stamp databound HTML in the DOM using injectBoundHTML. In 1.0 this function no longer exists. Is there an alternative way to do this?
Looks like you can set the innerHTML of your custom elements just like you would do to other elements.
Polymer({
is: 'x-custom',
ready: function() {
this.innerHTML = 'Hello World, I am a <b>Custom Element!</b>';
}
});
I am not sure if the Polymer team has implemented a special method like injectBoundHTML to do this.
I've been reading up on web components and am pretty intrigued by the nascent spec. Does anyone know if there is any support for 2-way data binding in the DOM, without having to use Polymer? An example would be appreciated.
Object.observe is a potential new way to do databinding in javascript. This feature is scheduled for Ecmascript 7(javascript), but some browsers currently support it, check here. Also check out this html5rocks article on object.observe
No, data binding isn't part of the Web Components spec.
You can of course implement data binding yourself using native JavaScript event listeners, and possibly the Proxy object, but it's probably best not to re-invent the wheel: if you want data binding, choose one of the many JavaScript frameworks out there which supports that. Polymer, React, Angular, and Vue are some recent examples of such libraries.
I've been playing around with this over the last few days. You can create a StateObserver class, and extend your web components from that. A minimal implementation looks something like this:
// create a base class to handle state
class StateObserver extends HTMLElement {
constructor () {
super()
StateObserver.instances.push(this)
}
stateUpdate (update) {
StateObserver.lastState = StateObserver.state
StateObserver.state = update
StateObserver.instances.forEach((i) => {
if (!i.onStateUpdate) return
i.onStateUpdate(update, StateObserver.lastState)
})
}
}
StateObserver.instances = []
StateObserver.state = {}
StateObserver.lastState = {}
// create a web component which will react to state changes
class CustomReactive extends StateObserver {
onStateUpdate (state, lastState) {
if (state.someProp === lastState.someProp) return
this.innerHTML = `input is: ${state.someProp}`
}
}
customElements.define('custom-reactive', CustomReactive)
class CustomObserved extends StateObserver {
connectedCallback () {
this.querySelector('input').addEventListener('input', (e) => {
this.stateUpdate({ someProp: e.target.value })
})
}
}
customElements.define('custom-observed', CustomObserved)
<custom-observed>
<input>
</custom-observed>
<br />
<custom-reactive></custom-reactive>
fiddle here
I like this approach because it occurs directly between precisely those elements you want to communicate with, no dom traversal to find data- properties or whatever.
One way: $0.model = {data}; setter on $0 assigns $0.data, responding to the update, and the other way: $1.dispatchEvent(new CustomEvent('example', {detail: $1.data, cancelable: true, composed: true, bubbles: true})); with $0.addEventListenever('example', handler) gives 2 way data binding. The data object is the same, shared on 2 elements, events and setters allow responding to updates. To intercept updates to an object a Proxy works model = new Proxy(data, {set: function(data, key, value){ data[key] = value; ...respond... return true; }}) or other techniques. This addresses simple scenarios. You might also consider looking at and reading the source for Redux, it provides conventions that seem relatively popular. As Ajedi32 mentions reinventing the wheel for more complex scenarios is not so practical, unless it's an academic interest.
I'm going nuts here but the each function is just not working for me.
I have about 20 elements with a class name of "lookup" (text boxes) and this function successfully turns all elements red:
document.addEvent('domready', function()
{
var tb = $$('.lookup');
tb.setStyle("color", "red");
});
However, in the following code, I would expect to get some alert for each element but the alert don't hit at all, and no exception is raised either. It is like the each is iterating through 0 items....
document.addEvent('domready', function()
{
var tb = $$('.lookup');
tb.each(function(el)
{
alert("hi");
});
});
Any idea what I might be doing wrong?
In both examples above, I used $$('.lookup').each and $$('.lookup').setStyle() with the same outcome (example 1 works; example 2 doesn't).
Thanks in advance.
Which browsers have problems? Try use 'window' instead 'document'
window.addEvent('domready', function(){
var tb = $$('.lookup');
tb.each(function(el){
el.setStyle("color", "red");
alert("hi");
});
});
In mootools better always use 'each' for working with array of elements.
I've discovered that reordering the mootools include script so that it is referenced after the Microsoft WebResource.axd?d= include script resolves the problem. Mootools appears to handle the conflict, whereas Microsoft ASP.NET can't.