How to fire the attributeChanged-Function
109 views
Skip to first unread message
Niko Lang
Jan 9, 2015, 5:24:56 AM1/9/15
to polym...@googlegroups.com
I have a simple canvas object like this:
<polymer-element name="canvas-diagram" attributes="type width height json">
<template>
<div id="canvasField">
Typ: {{type}}, Width:<input value="{{width}}">, Height:{{height}}, json:{{json}}
<div id="canvasContainer">
<canvas id="canvasObj" width="{{width}}" height="{{height}}"></canvas>
</div>
</div>
</template>
<script>
function getMaxOfArray(numArray) {
return Math.max.apply(null, numArray);
}
Polymer("canvas-diagram",{
type: "bar",
width: "300",
height: "200",
ready: function() {
console.log("this.ready()");
this.writeDiagram();
},
attributeChanged: function(attrName, oldVal, newVal) {
console.log("this.attributeChanged()");
console.log(attrName, 'old: ' + oldVal, 'new:', newVal);
this.writeDiagram();
},
writeDiagram : function(){
[...]
},
json: {
data:[
{"name":"Texts","value":"150"},
{"name":"Videos","value":"50"},
{"name":"Audio","value":"30"},
{"name":"Test","value":"20"},
{"name":"Test","value":"20"},
{"name":"Test","value":"20"}
]}
});
</script>
</polymer-element>
But when I canhage an attribute manually the
attributeChanged() Function doesnt fire. What am I doing wrong?
Max
Jan 9, 2015, 7:37:27 AM1/9/15
to Niko Lang, polym...@googlegroups.com
How/where exactly are you changing the attribute? I imagine on an instantiation of this polymer element?
You could, of course, add an intermediate function, itself called by the attributeChanged function and call that function directly; but I suspect you're asking an underlying question.
You could, of course, add an intermediate function, itself called by the attributeChanged function and call that function directly; but I suspect you're asking an underlying question.
Max.
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1d271638-10b1-42bb-9faa-c594f4738f07%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Niko Lang
Jan 9, 2015, 7:44:15 AM1/9/15
to polym...@googlegroups.com, lang.n...@gmail.com
When I have the Object
and I change one of its attributes the function should fire.
Max
Jan 9, 2015, 8:24:15 AM1/9/15
to Niko Lang, polym...@googlegroups.com
I just tried it from CDE, and it worked as expected (apologies for stupid chrome console cut&paste nonsense):
...: attributeName: some-attribute
my-element.html:8 oldValue one
my-element.html:9 newValue two
my-element.html:7 attributeName: other-attribute
my-element.html:8 oldValue null
my-element.html:9 newValue new
from this code :
<!doctype html>
<html>
<head>
<title>helloworld</title>
<link rel="stylesheet" href="styles.css">
<link rel="import" href="my-element.html">
</head>
<body unresolved>
<my-element id="my_element" some-attribute="one"></my-element>
<script>setTimeout(function() {
var myElement = document.getElementById("my_element");
myElement.setAttribute("some-attribute", "two");
myElement.setAttribute("other-attribute", "new");
},1000);</script>
</body>
</html>
and
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="my-element" attributes="some-attribute">
<script>
Polymer({
attributeChanged: function(attributeName, oldValue, newValue) {
console.log("attributeName:", attributeName);
console.log("oldValue", oldValue);
console.log("newValue", newValue);
}
})
</script>
</polymer-element>
Perhaps you can spot something different between what I tried and what you tried?
Max.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/dcd6077d-51af-4543-b1d2-d95f8aadf684%40googlegroups.com.
Niko Lang
Jan 9, 2015, 8:44:49 AM1/9/15
to polym...@googlegroups.com
It seems to work but something is killing my canvas rendering after some millisectonds. But thats another topic.
Max
Jan 9, 2015, 8:52:47 AM1/9/15
to Niko Lang, polym...@googlegroups.com
ok, but what was wrong in your initial attempt?
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/844c7fd7-42dc-4b53-a984-7ced8f34ea91%40googlegroups.com.
Niko Lang
Jan 9, 2015, 8:56:40 AM1/9/15
to polym...@googlegroups.com, lang.n...@gmail.com
Nothing. It was my fault that I was lazy and changed the attricute with Firebug... And this doesnt fire anything
Max
Jan 9, 2015, 9:11:34 AM1/9/15
to Niko Lang, polym...@googlegroups.com
Ah, ok. That's an interesting observation in itself. Thanks for sharing.
Max.
Just a quick test in chrome shows that it does fire it if I do it from the chrome console (and copy/paste works better when doing 'all'):
my-element.html:7 attributeName: some-attribute
my-element.html:8 oldValue one
my-element.html:9 newValue two
my-element.html:7 attributeName: other-attribute
my-element.html:8 oldValue null
my-element.html:9 newValue new
var el = document.getElementById('my_element')
undefined
el.setAttribute("some-attribute","three");
my-element.html:7 attributeName: some-attribute
my-element.html:8 oldValue two
my-element.html:9 newValue three
undefined
Just for reference. It's kind of curious that it doesn't work for firebug - I wonder if it is something to do with the polyfill?
Anyway...
Max.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1b016ece-e5a3-44d0-a266-3cb1efe0776e%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages