Question

我没有成功将“复杂”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

数组项末尾有一个额外的逗号。注意，你几乎从不以这种方式传递数据，你通常会这样传递数据=＆＃34; {{myData的}}＆＃34;

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属性传递给聚合物组件？

2 个答案: