我正在尝试通过 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/