Question

我正在学习Polymer制作一个小型单页应用。我想管理分页，因为它在Polymer入门套件中完成，但没有使用模板dom-bind （因为我在页面后面需要一个，我们不能在另一个中嵌套一个）

所以，我尝试制作自己的自定义元素，以便绑定其属性＆＃34; route＆＃34;到铁页元素。但是，正如你可以想象的那样，它没有用。

所以我尝试在一个小例子中使数据绑定工作。正如＆＃34;聚合物快速导览＆＃34;所示，我在＆＃34; pagination-element.html＆＃34;中创建了一个自定义元素。：

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

<script>
  Polymer({
    is: "pagination-element",
    properties:{
      route : {type:String, value:"/", notify : true}
    }
  });
</script>

并在我的页面中使用它（我已检查 pagination-element.html 已导入）：

<pagination-element id="app" route="/">
    <paper-input label="{{ route }}"></paper-input>
</pagination-element>

然后，我试图获得＆＃34;路线＆＃34;使用其他Polymer自定义元素的值，但它只显示我＆＃34; {{route}}＆＃34;在我的页面上。

我想我还没有理解数据绑定是如何工作的......

任何人都可以帮助我吗？

非常感谢！

度过美好的一天

Answer 1

在您的页面上，您需要将pagination-element包裹在auto binding template中使用（除非您在其他元素中使用此内容）：

<template is="dom-bind">

在您的paper-input中，您将label设置为route的值，但您没有给route一个值。我猜你希望它的值是route上pagination-element属性的值：

所以在index.html或其他页面中：

<body unresolved>
    <template is="dom-bind">
        <pagination-element id="app" route="{{route}}">
            <paper-input label="{{route}}"></paper-input>
        </pagination-element>
    </template>
</body>

用于分页的自定义元素的Polymer 1.0数据绑定

1 个答案: