这是我的自定义元素。我可以看到但看不到列表。任何人都可以告诉我我在这里做错了什么？
<link rel="import" href="/static/bower_components/polymer/polymer.html">
{#<link rel="import" href="/static/bower_components/core-ajax/core-ajax.html">#}
<link rel="import" href="/static/bower_components/core-list/core-list.html">
<polymer-element name="my-el">
<template>
<style>
core-list {
height: 100%;
}
.item {
box-sizing: border-box;
height: 80px;
border-bottom: 1px solid #ddd;
padding: 4px;
cursor: default;
background-color: white;
overflow: hidden;
}
</style>
<h1>адfа</h1>
<core-list data="{{ apartments }}">
<template>
<div class="item">
{{ model.text }}
</div>
</template>
</core-list>
</template>
<script>
Polymer('my-el', {
apartments: [],
ready: function() {
console.log('ready');
this.apartments = [{
imageUrl: "/static/images/kvartira.jpg",
text: "lslslsls"
}]
}
})
</script>
</polymer-element>
最佳答案
我记得 Rob Dodaon 在他的一个视频中说过，核心列表及其托管父级需要指定高度。您确实在 core-list 上指定了它，但不在 body 上。解决办法有两种:
- 添加
html, body { height: 100%; }到您正在使用的页面的CSS样式my-el(或将您的元素放入全出血正文中:<body fullbleed><my-el></my-el></body>) - 包裹你的
core-list进入div并指定div的高度.
我把后一个例子放在 jsfiddle 上并作为一个片段:
http://jsfiddle.net/kreide/a9yg71zm/
<link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html">
<link rel="import" href="http://www.polymer-project.org/0.5/components/core-elements/core-elements.html">
<polymer-element name="my-el">
<template>
<style>
core-list {
height: 100%;
}
.item {
box-sizing: border-box;
height: 80px;
border-bottom: 1px solid #ddd;
padding: 4px;
cursor: default;
background-color: white;
overflow: hidden;
}
</style>
<div fit style="overflow:auto;">
<h1>адfа</h1>
<core-list data="{{ apartments }}">
<template>
<div class="item">{{ model.text }}</div>
</template>
</core-list>
</div>
</template>
<script>
Polymer('my-el', {
apartments: [],
ready: function() {
console.log('ready');
this.apartments = [{
text: "lslslsls"
}, {
text: "lslslsls2"
}]
}
})
</script>
</polymer-element>
<my-el></my-el>关于javascript - 为什么 polymer 核心列表不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27648328/