聚合物dom重复属性不起作用
Polymer dom-repeat attribute is not working
我一直在遵循一个教程,并为自己的基本联系人列表进行尝试。当不同的部分不在dom重复模板中时,它们在组件中显示得很好。在使用聚合物网站上的dom重复后,它们不再出现。
index.html
<!doctype html>
<html lang="en">
<head>
Everything is linked correctly
</head>
<body>
<aside>
<contact-list></contact-list>
</aside>
</body>
</html>
组件.html
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="contact-list">
<style>
ul {
list-style: none;
}
li {
display: flex;
padding: 20px;
}
li img {
border-radius: 50%;
margin-right: 10px;
}
li + li {
border-top: solid 1px #666;
}
h3 {
margin-right: 0 40px 0 0;
line-height: 80px;
}
li span {
line-height: 120px;
margin-left: 20px;
}
</style>
<template>
<ul>
<template is="dom-repeat" items="{{contact}}">
<li>
<img src="{{item.img}}" alt="User Photo">
<h3>{{item.name}}</h3>
<span>{{item.email}}</span>
</li>
</template>
</ul>
</template>
</dom-module>
<script>
Polymer({
is: "contact-list",
ready: funtion() {
this.contact = [
{
name: "Scott",
email: "ShimyShimy@gmail.com",
img: "https://randomuser.me/api/portraits/men/45.jpg"
}
, {
name: "Tim",
email: "DankMemer@gmail.com",
img: "https://randomuser.me/api/portraits/men/28.jpg"
}
, {
name: "Ben",
email: "SuperCuck@gmail.com",
img: "https://randomuser.me/api/portraits/men/68.jpg"
}
]
}
});
</script>
您在中有一个拼写错误
ready: funtion() {
应该是带有"c"的function
。修复它就足够让你的代码为我工作了(见下面的演示)。
<head>
<base href="https://polygit.org/polymer+1.6.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<contact-list></contact-list>
<dom-module id="contact-list">
<style>
ul {
list-style: none;
}
li {
display: flex;
padding: 20px;
}
li img {
border-radius: 50%;
margin-right: 10px;
}
li + li {
border-top: solid 1px #666;
}
h3 {
margin-right: 0 40px 0 0;
line-height: 80px;
}
li span {
line-height: 120px;
margin-left: 20px;
}
</style>
<template>
<ul>
<template is="dom-repeat" items="{{contact}}">
<li>
<img src="{{item.img}}" alt="User Photo">
<h3>{{item.name}}</h3>
<span>{{item.email}}</span>
</li>
</template>
</ul>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: "contact-list",
ready: function() {
this.contact = [{
name: "Scott",
email: "ShimyShimy@gmail.com",
img: "https://randomuser.me/api/portraits/men/45.jpg"
}, {
name: "Tim",
email: "DankMemer@gmail.com",
img: "https://randomuser.me/api/portraits/men/28.jpg"
}, {
name: "Ben",
email: "SuperCuck@gmail.com",
img: "https://randomuser.me/api/portraits/men/68.jpg"
}];
}
});
});
</script>
</dom-module>
</body>
plunker
相关文章:
- 在jQuery中链接时CSS属性不起作用
- 函数中的 angularJS 访问对象属性不起作用
- 使用 css() 更改自定义属性不起作用
- 调用类属性不起作用
- 为什么onclick属性不起作用
- JQuery Smart Spinner:回调属性不起作用
- “document.write”的字体属性不起作用
- 行数文本输入属性不起作用
- CSS 显示属性不起作用
- 必需属性不起作用
- HTML 中文本框上的必需属性不起作用
- 使用变量的 Href 属性不起作用
- 使用 javascript 修改 svg 属性不起作用
- JS:为什么这个对象属性不起作用,只有当我把它作为变量放在其中一个方法中时,它才有效
- j查询验证引擎属性不起作用
- AngularJS “{{}}” insite title 属性不起作用
- JQuery css 属性不起作用
- 设置属性不起作用
- 使用量角器获取按钮上的禁用属性不起作用
- KnockoutJS和计算属性不起作用