Polymer custom element data input - html

Question

I am building a basic folder system for a website. I have an array of folder names defined in $scope.folderNames. When I pass this array of folder names into my custom element, it converts the array of stings into one string. E.G. ["cat", "mouse", "dog"] becomes '["cat", "mouse", "dog"]' so that when I reference folderNames[0] it returns '[' instead of "cat". Any idea how I can prevent this from happening?
Jade element call:
folder-menu(id="folder-menu", angupoly="{selected:'$root.height'}", label="Folders", icon="folder", values='{{folderNames}}')
angupoly is a library that allows angular to use Node.bind() to listen to changes in custom element attributes.
Custom element:
<link rel="import" href="/polymer/polymer.html">
<link rel="import" href="/core-menu/core-menu.html">
<link rel="import" href="/core-menu/core-submenu.html">
<link rel="import" href="/core-item/core-item.html">
<polymer-element name="folder-menu" attributes="label icon values selected">
<template>
<core-menu>
<core-submenu icon="{{icon}}" label="{{label}}" selected="{{selected}}">
<core-item label="hi"></core-item>
<template repeat={{v in values}}>
<core-item label="{{v}}">
</core-item>
</template>
</core-submenu>
</core-menu>
</template>
<script>
Polymer('folder-menu', {
publish: {
selected : {value:0, reflect : true},
values : {value: [], reflect : true}
},
attributeChanged: function(attrName, oldVal, newVal) {
console.log(attrName, 'old: ' + oldVal, 'new: ', newVal);
console.log(typeof(newVal));
}
});
</script>
</polymer-element>
Console output:
selected old: null new: 0
string
values old: {{folderNames}} new:
string
values old: new: ["Calls","Flagged","Group1","Group2","Group3"]
string

Answer 1

Couple of things to watch out for:
Polymer will [de]serialize array/object published properties if their type is hinted.
properties which are an object or array are never reflected back to the attribute: http://www.polymer-project.org/docs/polymer/polymer.html#attrreflection. The reflect: true for values in your publish block doesn't do anything.
attributeChanged() will always give you a string value (attributes are always strings). What you want is to observe the values property change in a change watcher (e.g. valuesChanged()). That will give you the object as expected (if you've hinted the type):
Here's te setup:
created: function() {
this.values = []; // hint the type, and initialize in the element instance.
},
valuesChanged: function() {
console.log(this.values, typeof(this.values));
}
http://jsbin.com/xizihana/1/edit