Data binding 用于分页的自定义元素上的Polymer 1.0数据绑定_Data Binding_Polymer_Polymer 1.0_Polymer Starter Kit

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

data-binding polymer

Data binding 用于分页的自定义元素上的Polymer 1.0数据绑定,data-binding,polymer,polymer-1.0,polymer-starter-kit,Data Binding,Polymer,Polymer 1.0,Polymer Starter Kit,我正在学习制作一个小的单页应用程序。我想像在Polymer starter kit中那样管理分页，但不使用模板dom bind（因为我需要在页面的后面使用一个，我们不能将一个嵌套在另一个中）因此，我尝试创建自己的自定义元素，以便将其属性“route”绑定到iron pages元素。但是，正如你所能想象的，它没有起作用因此，我尝试在一个小示例中实现数据绑定。如“聚合物快速教程”所示，我在“pagination element.html”中创建了一个自定义元素：聚合物({ 是：“分页元素”

我正在学习制作一个小的单页应用程序。我想像在Polymer starter kit中那样管理分页，但不使用模板dom bind（因为我需要在页面的后面使用一个，我们不能将一个嵌套在另一个中）

因此，我尝试创建自己的自定义元素，以便将其属性“route”绑定到iron pages元素。但是，正如你所能想象的，它没有起作用

因此，我尝试在一个小示例中实现数据绑定。如“聚合物快速教程”所示，我在“pagination element.html”中创建了一个自定义元素：


聚合物({
是：“分页元素”，
特性：{
路由：{type:String，值：“/”，notify:true}
}
});

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

然后，我尝试使用另一个聚合自定义元素获取“route”值，但它在我的页面上只显示“{route}”

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

有人能帮我吗

非常感谢

祝您愉快

在页面上，您需要将

分页元素

包装在using中（除非您在另一个元素中使用此元素）：

在页面上，您需要将

分页元素

包装在using中（除非您在另一个元素中使用此元素）：

谢谢Ben，但我想避免使用dom绑定模板，因为我需要在我的页面中稍后使用dom绑定模板，并且我们不能嵌套使用它。正如我对Polymer文档的理解：“要使用Polymer绑定而不定义新的自定义元素，请使用dom绑定元素”，我们可以在自定义元素之间绑定数据，而无需使用dom-bind。为什么不能为整个页面使用一个

dom bind

？要在index.html上的自定义元素之间进行数据绑定，确实需要将其包装在dom绑定中。你可以看到这是如何在“感谢Ben”中完成的，但我希望避免使用dom绑定模板，因为我需要在我的页面后面使用dom绑定模板，并且我们不能嵌套使用它。正如我对Polymer文档的理解：“要使用Polymer绑定而不定义新的自定义元素，请使用dom绑定元素”，我们可以在自定义元素之间绑定数据，而无需使用dom-bind。为什么不能为整个页面使用一个

dom bind

？要在index.html上的自定义元素之间进行数据绑定，确实需要将其包装在dom绑定中。你可以看到这是如何在

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

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

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

<template is="dom-bind">

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