如何将复杂的 JSON 属性传递给聚合物组件？

Question

我无法将 "complex" JSON 对象从应用程序主体传递到组件。

传递数组或简单的 JSON 对象按预期工作，以下 3 种形式有效：

<x-name fullname='{ "first": "Bob", "last": "Dobbs" }'></x-name> 
<x-name fullname='["Bob", "Dobbs"]'></x-name> 
<x-name fullname='[{ "first": "Bob" }, { "last": "Dobbs" }]'></x-name>

但是，如果对象有点复杂，比如嵌入一个数组：

 <x-name fullname=
     '[ 
         { "first": "Bob",  "several": ["Bob", "Dobbs"] }, 
         { "last": "Dobbs", "many":    ["Bob", "Dobbs"] }
      ]'>
 </x-name>

使用什么语法？有可能吗？

对于前 2 种形式的工作，给出一个提示（在 created 函数（）中），以便组件知道预期的格式。第三种形式使用空数组提示。在最后一个表格中，如何给出提示？

谢谢大家。 F.

Answer 1

您的数组项末尾有一个额外的逗号。注意，你几乎从不这样传递数据，你通常这样传递 data="{{myData}}"

Answer 2

这是一个完整的工作示例：

来自html正文：

<social-bar sites='[
        {"base":"http://www.facebook.com","path":"/me","icon":"post-facebook","extras":["extra1","extra2","extra4"]},
        {"base":"http://www.twitter.com","path":"/me","icon":"post-twitter","extras":["extra4"]},        
        {"base":"http://plus.google.com","path":"/gplusId","icon":"post-gplus","extras":["extra5","extra6"]}
    ]'>
</social-bar>

来自组件（sites变量在组件声明定义中声明为属性，并在created方法中初始化为数组），

<template repeat="{{site in sites}}">
    <a href="{{site.base}}{{site.path}}">
        <core-icon-button icon="social:{{site.icon}}"></core-icon-button>
    </a>
    <template repeat="{{extra in site.extras}}">
        <h4>{{extra}}</h4>
    </template>
</template>

希望这对某人有所帮助。 F.

如何将复杂的 JSON 属性传递给聚合物组件？

How to pass a complex JSON attribute to a polymer component?

json

polymer