Question

我试图通过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>

Answer 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>

希望它可以帮助某人：）

聚合物数据通过属性绑定

1 个答案: