如何将对象文字作为聚合物属性传递答案

【问题标题】：How to pass object literals as polymer attributes如何将对象文字作为聚合物属性传递
【发布时间】：2015-11-01 05:59:11
【问题描述】：

为了单独测试我的一些聚合物自定义元素，我希望能够为一些通常来自父元素的属性传入 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>

【问题讨论】：

标签： javascript polymer web-component

【解决方案1】：

如果您使用空哈希初始化 stuff 属性，Polymer 只会将 JSON 文本转换为对象：

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

没有这个，stuff 属性将作为字符串传入。数组也是如此。

【讨论】：

知道如何在不知道属性名称的情况下执行此操作吗？
不要直接添加东西：{}，而是使用声明的属性和默认值特性。并且，使用返回对象的函数，否则元素的所有实例最终将共享同一个对象。

【解决方案2】：

另一种方法：

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

【讨论】：

基本上重复了上面但很好的例子。

【解决方案3】：

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>

【讨论】：

喜欢这个，因为我最终将我的组件基于这个解释。 +1