Question

这是我的自定义元素。我可以看到但不是清单。谁能告诉我这里做错了什么？

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

Answer 1

我记得Rob Dodaon在他的一个视频中说，核心列表和其托管父母需要给予高度。您确实在core-list上指定了它，但在身体上没有指定。有两种解决方案：

将html, body { height: 100%; }添加到您使用my-el的页面的CSS样式中。（或将您的元素置于一个完整的身体中：<body fullbleed><my-el></my-el></body>）
将core-list换成div并指定div的高度。

我把后一个例子放在jsfiddle上，并作为一个片段在这里：

http://jsfiddle.net/kreide/a9yg71zm/

＆＃13;

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

＆＃13;

为什么Polymer core-list不起作用？

1 个答案: