CODEWITHSUNDEEP
data-bindingpolymerpolymer-1.0polymer-starter-kit
wyllyjon
wyllyjon

Reputation: 491

Polymer 1.0 data binding on custom element for pagination

I am learning Polymer to make a small single page app. I would like to manage pagination as it is done in the Polymer starter kit, but without using the template dom-bind (because I need one later in the page, and we cannot have one nested in another).

So, I tried to make my own custom element in order to bind its attribute "route" to the iron-pages element. But, as you can imagine, it did not work.

So I tried to make data binding work in a small example. As shown in the "Quick Tour of Polymer", I have made a custom element in "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>

and using it in my page (I have checked that pagination-element.html is imported) : 

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

Then, I tried to get the "route" value with an other Polymer custom element, but it only displays me "{{route}}" on my page.

I think I have not understood how data binding works...

Can anyone help me ?

Thanks a lot !

Have a good day

Upvotes: 1

Views: 1636

Answers (1)

Ben Thomas
Ben Thomas

Reputation: 3200

On your page you will need to wrap your pagination-element in an auto binding template using (unless you are using this inside another element):

<template is="dom-bind">

In your paper-input you are setting the label to be the value of route but you have not given route a value. I'm guessing you want the value of it to be that of the route property on the pagination-element:

So in your index.html or other page:

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

Upvotes: 0

Related Questions