文章/答案/技术大牛

发布

社区首页 >问答首页 >聚合物dom-repeat属性不工作

问聚合物dom-repeat属性不工作
EN

Stack Overflow用户

提问于 2016-08-02 12:48:24

回答 1查看 255关注 0票数 2

我一直在遵循一个教程，并尝试自己的东西，以获得一个基本的联系人列表。当不同的部分不在dom-repeat模板中时，它们在组件中显示得很好。在使用聚合物网站上的dom-repeat后，它们不再出现。

index.html

<!doctype html>

<html lang="en">

<head>
  Everything is linked correctly
</head>

<body>
    <aside>
    <contact-list></contact-list>
    </aside>
</body>

</html>

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

javascript

html

dom

polymer

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-08-02 13:16:33

你有一个打字错误：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38711967

复制

相似问题

问聚合物dom-repeat属性不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物dom-repeat属性不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物dom-repeat属性不工作
EN