gpt4 book ai didi

javascript - 为什么 polymer 核心列表不起作用?

转载 作者:行者123 更新时间:2023-11-28 19:27:08 26 4
gpt4 key购买 nike

这是我的自定义元素。我可以看到但看不到列表。任何人都可以告诉我我在这里做错了什么?

<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 上。解决办法有两种:

  1. 添加html, body { height: 100%; }到您正在使用的页面的CSS样式 my-el (或将您的元素放入全出血正文中: <body fullbleed><my-el></my-el></body> )
  2. 包裹你的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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com