Как передать сложный атрибут JSON полимерному компоненту?

У меня нет успеха в передаче «сложного» объекта JSON компоненту, из основного корпуса приложения.Как передать сложный атрибут 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>

Какой синтаксис использовать? это даже возможно?

Для первых двух форм для работы указывается подсказка (в функции created()), чтобы компонент знал, какой формат ожидается. Третья форма работает с пустым знаком массива. В последней форме, как дать этот намек?

Спасибо, ребята. F.

источник

2015-01-16 Flashbump

У вас есть дополнительная запятая в конце вашего элемента массива. Обратите внимание, что вы почти никогда не передавать данные таким образом, вы обычно проходят, как этого данных = "{{MyData}}"

источник

2015-01-16 01:05:32 lazieburd

Вы были правы. Последней запятой был виновник. Создание собственного ответа, чтобы дать полный рабочий пример. F. – Flashbump

Почему бы не отметить это как ответ? –

Выполнено, хотя ответ, который я дал, является более общим руководством по передаче сложного JSON и использования его в компоненте. – Flashbump

Вот полный рабочий пример:

От 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.

источник

2015-01-16 12:41:47 Flashbump

Как передать сложный атрибут JSON полимерному компоненту?

ответ

Смежные вопросы