Question

我正在为网站构建基本文件夹系统。我在$ scope.folderNames中定义了一个文件夹名称数组。当我将这个文件夹名称数组传递给我的自定义元素时，它会将stings数组转换为一个字符串。例如。 [“cat”，“mouse”，“dog”]变成'[“cat”，“mouse”，“dog”]''这样当我引用folderNames [0]时，它返回'['而不是“cat”。知道如何防止这种情况发生吗？

玉元素召唤：

folder-menu(id="folder-menu", angupoly="{selected:'$root.height'}", label="Folders", icon="folder", values='{{folderNames}}')

angupoly是一个允许angular使用Node.bind（）来监听自定义元素属性更改的库。

自定义元素：

<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>

控制台输出：

selected old: null new:  0 
string 
values old: {{folderNames}} new:   
string 
values old:  new:  ["Calls","Flagged","Group1","Group2","Group3"] 
string

Answer 1

值得注意的事情：

Polymer将[de]序列化数组/对象发布的属性，如果their type is hinted。
属性永远不会反映回属性：http://www.polymer-project.org/docs/polymer/polymer.html#attrreflection。 reflect: true区块中values的{{1}}无法执行任何操作。
publish将始终为您提供字符串值（属性始终为字符串）。您想要的是观察更改观察器中的attributeChanged()属性更改（例如values）。这将为您提供预期的对象（如果您已提示类型）：

此处设置：

valuesChanged()

http://jsbin.com/xizihana/1/edit

Polymer自定义元素数据输入

1 个答案: