Question

我已经创建了一个测试聚合物元素，其中我正在弄清楚如何在模板中使用use数组。我的代码不起作用，1.0的文档并没有真正谈论如何在模板标签中使用重复。

我的元素：

    <!-- Imports polymer -->
<link rel="import" href="polymer/polymer.html">

<!-- Defines element markup -->
<dom-module id="my-element" >
    <template>
    <style>
    my-element
    </style>
    <h2>{{data}}</h2>
    <ul>
    <template repeat={{column in columns}} bind>
    <li>{{column}}</li>
    </template>
    </ul>

    </template>
</dom-module>

<!-- Registers custom element -->
<script>
Polymer({
    is: 'my-element',

    // Fires when an instance of the element is created
    created: function() {



    },

    // Fires when the local DOM has been fully prepared
    ready: function() {},

    // Fires when the element was inserted into the document
    attached: function() {},

    // Fires when the element was removed from the document
    detached: function() {},

    // Fires when an attribute was added, removed, or updated
    attributeChanged: function(name, type) {

    alert("changed");

    },

    properties:{

    data :String,
    columns:Array

    }
});
</script>

以及我使用元素的index.html页面：

<!doctype html>
<html>
<head>

    <meta charset="utf-8">
    <title>&lt;my-repo&gt;</title>

    <!-- Imports polyfill -->
    <script src="webcomponents-lite.min.js"></script>

    <!-- Imports

自定义元素 - ＆gt;

<link rel="import" href="my-element.html">

<!-- Runs custom element -->
<my-element users = '{{[1,2,3,4]}}'  data="This is a polymer table"></my-element>

请让我知道我的代码有什么问题!!

Answer 1

你必须使用

<template is="dom-repeat" items="{{users}}">
  <li>{{item}}</li>
</template>

在主文件中：

<my-element users="[1,2,3,4]" data="This is a polymer table"></my-element>

你可以在Youtube上搜索Polycast，这是Google Developers的一个系列，他们在那里为初学者谈论Polymer并展示很酷的技巧。

Answer 2

数据绑定中的

Polymer 1.0 does not allow expressions。问题在于：

<my-element users = '{{[1,2,3,4]}}' ...>

您需要将{{[1,2,3,4]}}替换为属性。像这样：

<template is="dom-bind">
  <my-element users = '{{myarray}}'  data="This is a polymer table"></my-element>
</template>
<script>
(function() {
  var template = document.querySelector('template[is="dom-bind"]');
  template.myarray = [1,2,3,4]; 
})();
</script>

聚合物1.0中的模板重复

2 个答案: