Как передать литералы объектов как атрибуты полимеров

Чтобы изолировать отдельные изолирующие элементы из полимера, я хотел бы иметь возможность передавать литералы js для некоторых атрибутов, которые обычно поступают из родительских элементов. Мне сложно понять, как это сделать. См. Этот примерный код. Если бы он работал так, как мне бы хотелось, он отображал бы 1 и 2 рядом друг с другом, но это не сработало.Как передать литералы объектов как атрибуты полимеров

<script src="http://www.polymer-project.org/webcomponents.js"></script> 
 
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> 
 

 
<polymer-element name="my-element" attributes="stuff"> 
 
    <template> 
 
    {{stuff.one}} {{stuff.two}} 
 
    </template> 
 
    <script> 
 
    Polymer('my-element', { 
 
     ready: function() { 
 
     console.log(this.stuff); 
 
     } 
 
    }); 
 
    </script> 
 
</polymer-element> 
 
<my-element stuff='{"one": 1, "two": 2}'></my-element>

источник

2014-11-14 cayblood

Полимер только преобразует текст JSON в объект, если инициализировать stuff свойство с пустой хэш:

Polymer('my-element', { 
    stuff: {}, 
    ready: function() { 
     console.log(this.stuff); 
    } 
});

Без этого атрибута stuff передается в как строка. То же самое касается массивов.

источник

2014-11-14 11:00:42

Любая идея, как сделать это, не зная имени атрибута? –

Не добавляйте вещи: {} напрямую, но используйте объявленные свойства и значение по умолчанию. И используйте функцию, возвращающую объект, иначе все экземпляры вашего элемента будут разделены одним и тем же объектом. – Overclocked

index.html 
... 
    <body unresolved fullbleed layout vertical> 
    <my-post info='{"name":"Alex","id":"123"}' posts='[{"id":"456","name":"post1"},{"id":"789","name":"post2"}]'></my-post> 
    </body> 
    ... 

my-post.html 
    <link rel="import" href="../../bower_components/polymer/polymer.html"> 
    <polymer-element name="my-post" attributes="info posts" > 
     <template> 

     {{info.name}} 
     <template repeat="{{post in posts}}"> 
       <br> {{post.id}} - {{post.name}} 
     </template> 

     </template> 
    <script> 
    (function() { 
     Polymer({ 
     ready: function() { 
     this.info=JSON.parse(this.info) 
     this.posts=JSON.parse(this.posts) 
    }, 
    }); 
    })(); 
    </script> 
</polymer-element>

источник

2015-05-15 10:59:29

Как этот, как я в конечном итоге основывая свой компонент на этом объяснении. +1 – leeroya

Другой способ сделать это:

myElem.html

<link rel="import" 
     href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"> 

<dom-module id="my-element"> 
    <template> 
     <div> {{stuff.one}} {{stuff.two}} </div> 
    </template> 

    <script> 
     Polymer({ 
      is: "my-element", 
      properties: { 
       stuff:{ 
        type: Object, 
        value: {"one":"default_1","two":"default_2"} 
       } 
      } 
     }); 
    </script> 
</dom-module>

index.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="myElem.html"> 
    </head> 
    <body> 
    <my-element></my-element> 
    <my-element stuff={"one":"1","two":"2"}></my-element> 
    </body> 
</html>

Результат

default_1 default_2 
1 2

источник

2015-10-31 21:59:11 TLJ

в основном повторение вышеупомянутого, но приятного примера. – leeroya

Как передать литералы объектов как атрибуты полимеров

ответ

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