I am currently using Polymer on a project and for some reason I am getting data binding when I do not expect nor want it.
What I currently have is a boilerplate Polymer project that is supposed to have the new element I created (named shokka-eval-chart). This is working great but somehow information is being shared between the three elements.
In order to debug this problem I added in console.log messages that would tell me what was going on. Each time the console logs come back it indicates that the userData has been modified. Where is this modification happening and why?
Some things that you may notice:
- User Data is sent in using one way data binding::: [[userInfo.evaluations]]
- Index should not be notified of my changes to User Data::: notify: false
Some places that I can think of that I may have an issue:
- HTML - I may not be passing things into the tag correctly.
- Javascript - I have no idea how but I may be modifying the userData from there.
- Polymer - The obvious location to look. I probably am misunderstanding one of the concepts.
Please let me know where this is happening and what I am doing wrong to have this happen. Thanks in advance.
CONSOLE LOGS
shokka-eval-chart.html:89 Jan 16
shokka-eval-chart.html:91 40
shokka-eval-chart.html:92 40
shokka-eval-chart.html:93 0
shokka-eval-chart.html:89 Jan 16
shokka-eval-chart.html:91 0
shokka-eval-chart.html:92 40
shokka-eval-chart.html:93 -40
shokka-eval-chart.html:89 Jan 16
shokka-eval-chart.html:91 -40
shokka-eval-chart.html:92 40
shokka-eval-chart.html:93 -80
INDEX
<body unresolved class="fullbleed layout vertical">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<paper-drawer-panel id="paperDrawerPanel">
<paper-scroll-header-panel main condenses keep-condensed-header>
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<paper-material elevation="1">
<shokka-eval-chart id="comparison1"
user-evaluations="[[userInfo.evaluations]]"
eval-ref="{{baseRef}}/evalResults">
</shokka-eval-chart>
</paper-material>
<paper-material elevation="1">
<shokka-eval-chart id="comparison2"
user-evaluations="[[userInfo.evaluations]]"
eval-ref="{{baseRef}}/evalResults">
</shokka-eval-chart>
</paper-material>
<paper-material elevation="1">
<shokka-eval-chart id="comparison3"
user-evaluations="[[userInfo.evaluations]]"
eval-ref="{{baseRef}}/evalResults">
</shokka-eval-chart>
</paper-material>
</section>
</iron-pages>
</div>
</paper-scroll-header-panel>
...
Component Code
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="shokka-eval-chart">
<template>
<style>
:host {
display: block;
}
</style>
<google-chart id="{{id}}"
type="{{type}}"
options='{{options}}'
data='[[data]]'>
</google-chart>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'shokka-eval-chart',
properties: {
id: {
type: String
},
userEvaluations: {
type: String
},
evalRef: {
type: String
},
userData: {
type: Array,
value: [ ["Date", "Professionalism", "Skills", "Work Completion" ],
["Jan 16", 40, 35, 37 ],
["Feb 16", 39, 35, 34 ],
["Mar 16", 38, 36, 39 ],
["Apr 16", 42, 38, 40 ],
["May 16", 42, 37, 41 ],
["Jun 16", 43, 38, 40 ],
["Jul 16", 44, 40, 41 ],
["Aug 16", 45, 43, 42 ],
["Sep 16", 46, 46, 41 ],
["Oct 16", 45, 44, 42 ] ],
notify: false
},
data: {
type: Array,
computed: 'computeData(avgData, userData)',
notify: false
},
options: {
type: Object,
value: { "title": "Evaluation Comparison" }
},
type: {
type: String,
value: "column"
},
avgData: {
type: Array,
value: [ ["Date", "Professionalism", "Skills", "Work Completion" ],
["Jan 16", 40, 40, 40 ],
["Feb 16", 40, 40, 40 ],
["Mar 16", 40, 40, 40 ],
["Apr 16", 40, 40, 40 ],
["May 16", 40, 40, 40 ],
["Jun 16", 40, 40, 40 ],
["Jul 16", 40, 40, 40 ],
["Aug 16", 40, 40, 40 ],
["Sep 16", 40, 40, 40 ],
["Oct 16", 40, 40, 40 ] ],
notify: false
}
},
computeData: function(avgData, userData){
console.log(userData[1][0])
var data = userData.slice();
console.log(userData[1][1])
console.log(avgData[1][1])
console.log(userData[1][1]-avgData[1][1])
data[1][1] = userData[1][1] - avgData[1][1]
return data;
}
});
})();
</script>
</dom-module>
UPDATE:
Per Günter Zöchbauer's suggestion I have changed var data = userData; to var data = userData.slice();. However this has not yet solved the issue. There seems to be something else that I am missing here.
UPDATE:
After looking at the userData after data was modified it appears that it was still pointing to the same object. I changed var data = userData.slice(); to
var data = [];
for (var i = 0, len = userData.length; i < len; i++) {
data[i] = userData[i].slice();
}
in order to solve this issue. This has solved the issue I was encountering but still leads me to wonder why userData was being modified from a different tag. If someone could comment and let me know why it would be very appreciated.
