通过属性绑定聚合物数据答案

【问题标题】：polymer data binding through attributes通过属性绑定聚合物数据
【发布时间】：2015-01-18 07:01:06
【问题描述】：

我正在尝试通过 Polymer 上的属性使用数据绑定，但我只是从失败到失败。我尝试了许多语法来发送我的 JSON，但似乎没有任何效果......我可以请求一些帮助以查看和理解我做错了什么吗？

提前致谢，

这是我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Self Tutorial 02</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
  <link rel="import" href="social-nav.html">
</head>
<body>
  <social-nav social='[{"twitter":"@cyberwarfighte1"}]'></social-nav>
</body>
</html>

这是我的聚合物元素：

<polymer-element name="social-nav" attributes="social">
  <template>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" media="screen" type="text/css" />
    <div class="social-icons">
        {{social}}
        <template repeat="{{k in social}}">
          {{k}}
        </template>
    </div>
  </template>
  <script>
    Polymer('social-nav', {
    });
  </script>
</polymer-element>

【问题讨论】：

标签： html json data-binding polymer

【解决方案1】：

嗯，我自己找到了解决问题的方法。

对于和我有同样问题的人来说，答案是你的属性需要声明为聚合物元素内的对象。

这是我的固定代码：

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" media="screen" type="text/css" />
  <polymer-element name="social-nav" attributes="social">
      <template>
        <div class="social-icons">
            <template repeat="{{k in social}}">
              <a class="{{k.social}}" href="{{k.link}}"><i>{{k.social}}</i></a>
            </template>
        </div>
      </template>
      <script>
       Polymer('social-nav', {
         created: function(){ 
           this.social = []; // <- HERE !!
         }
       });
      </script>
    </polymer-element>

我的固定元素调用与良好的 JSON

<social-nav social="[{'social':'twitter','link':'http://twitter.com/cyberwarfighte1'},  {'social':'facebook','link':'http://facebook.com/samuel.cardillo.5'}]"></social-nav>

希望它可以帮助某人:)

【讨论】：