Question

这在我的代码中没有任何作用..

<template repeat="{{item in list}}"> </template>

我也尝试过使用如下方法，但是这个方法出错：

<template is="dom-repeat" id="example" items="{{list}}"></template>

我使用is="dom-repeat"收到以下错误：

Uncaught TypeError: Polymer.dom.addDebouncer is not a function
Uncaught TypeError: Polymer.dom is not a function

为什么？

这是我的代码

<link rel="import" href="../lib/iron-ajax/iron-ajax.html">

<link rel="import" href="../lib/polymer/polymer.html">

<link rel="import" href="welcome-title.html">

<dom-module id="remove-user">

<template>
  <iron-ajax id="getAll" url="http://localhost:3002/secure/api/all" method="GET" handle-as="json" on-response="getAllCB" with-credentials='true'></iron-ajax>

    <div class="ui relaxed stackable grid centered" id="admin-container">
        <welcome-title class="ui center aligned row grid"></welcome-title>
        <form class="ui grid remove-user hide twelve wide column" method='post' action="/secure/add-user">
            <h3>Remove User</h3>

            <table class="ui unstackable celled table ">
                <thead>
                    <tr><th class="nine wide">Username</th>
                        <th class="three wide">Permission</th>
                        <th class="one wide"></th>
                    </tr>
                </thead>
                <tbody> ...

这是我感到困惑的地方。我已经简化了循环以使其更容易调试，但它没有出现。虽然模板重复之外的任何文本都会出现。控制台中没有错误。

                    <template repeat="{{user in users}}">
                        <span>{{user}}</span>
                    </template>

为什么重复内部没有任何内容显示在我的页面上？

                    ... <tr>
                        <td><span></span></td>
                        <td></td>
                        <td class="collapsing">
                            <div class="ui fitted checkbox">
                                <input type="checkbox"> <label></label>
                            </div>
                        </td>
                    </tr>

                </tbody>
                <tfoot class="full-width">

                    <tr><th colspan="3">

                        <button class="right floated negative ui button"><i class="remove user icon"></i>Remove User(s)</button>
                    </th>
                </tr></tfoot>
            </table>
        </form>
    </div>

</template>



</dom-module>
<script>

Polymer({

    is: "remove-user",

    ready: function(){

        this.$.getAll.generateRequest();

    },

    getAllCB: function(data){

        this.users = data.detail.response;
    }

});

</script>

使用JSON.stringify（）输出到浏览器控制台时，用户JSON对象如下所示：

[{"username":"admin","permission":"admin"},            
{"username":"admin","permission":"application1"},
{"username":"user","permission":"application1"},
{"username":"test","permission":"application1"}]

访问完整项目：相关文件位于authentication/public/elements/remove-user.html下加载此元素的主页是authentication/secure.html https://github.com/CoultonF/Web-Development-3-Node.JS

Answer 1

看起来你试图在数据绑定中使用一个表达式，Polymer 1.x不支持它（也不是2.x的路线图）。

此代码的正确形式：

<template repeat="{{user in users}}">
  <span>{{user}}</span>
</template>

就是这样：

<template is="dom-repeat" items="{{users}}" as="user">
  <span>{{user}}</span>
</template>

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    properties: {
      users: {
        type: Array,
        value: () => ['Andy', 'Bob', 'Charlie']
      }
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <template is="dom-repeat" items="{{users}}" as="user">
        <span>{{user}}</span>
      </template>
    </template>
  </dom-module>
</body>

codepen

您可以在Polymer docs。

中详细了解dom-repeat模板

Polymer JS - 模板重复对我的数组没有任何作用。（铬）

1 个答案:

Polymer JS - 模板重复对我的数组没有任何作用。 （铬）

1 个答案:

Polymer JS - 模板重复对我的数组没有任何作用。（铬）