html - 通过属性进行 polymer 数据绑定(bind)

标签 html json data-binding polymer

我正在尝试通过 Polymer 上的属性使用数据绑定(bind),但我只是不断失败。我尝试了很多语法来发送 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 元件:

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

最佳答案

好吧,我自己找到了解决问题的方法。

对于任何和我有同样问题的人,答案是你的属性需要声明为 polymer 元素内的对象。

这是我的固定代码:

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

希望它可以帮助别人:)

关于html - 通过属性进行 polymer 数据绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27039227/

相关文章:

mysql - 如何使用 MYSQL 数据在 perl 脚本中创建键值 JSON 响应

c# - 绑定(bind)命令的正确方法

javascript - 在可编辑的 div 内创建标签

javascript - div的多种背景颜色

javascript - 在 html 网页加载时显示 JavaScript 表

javascript - list 更改时 Html5 缓存不更新

c# - WPF 读/写 JSON 与 XML

json - 在logstash中解析嵌套的json

c# - WPF 将祖先对象绑定(bind)为 CommandParameter

TextBox 资源中的 C# UWP 数据绑定(bind)