首页 文章

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

提问于
浏览 次
1

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

所以，我尝试创建自己的自定义元素，以便将其属性"route"绑定到 iron-pages 元素 . 但是，正如你可以想象的那样，它没有用 .

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

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

然后，我尝试使用其他Polymer自定义元素获取“route”值，但它只在我的页面上显示“{}” .

我想我还不明白数据绑定是如何工作的......

谁能帮我 ？

非常感谢 ！

祝你有美好的一天

data-binding polymer polymer-1.0 polymer-starter-kit

1 回答

  • 0

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

    <template is="dom-bind">

    在 paper-input 中，您将 label 设置为 route 的值，但您没有给出 route 值 . 我猜你想要它的值是 pagination-element 上 route 属性的值：

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

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

相关问题