CODEWITHSUNDEEP
polymer
user1700184
user1700184

Reputation: 1661

Polymer Data binding not working in application page

I created an application page that would take the attribute value and display the value. I use Polymer's data binding. But, it is not working:

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
      <title>demo-prep1 demo</title>
      <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel="import" href="../demo-prep1.html"/>
      <link rel="import" href="/bower_components/polymer/polymer.html">
    </head>
    <body>
      <div class="vertical-section-container centered">
        <h3>Basic demo-prep1 demo</h3>
        <demo-prep1 emp-name$="{{employeeName}}"></demo-prep1>
        Hello [[employeeName]]
        <input id="output_val" value="[[employeeName]]"></input>
      </div>
    </body>
</html>

I see this result: enter image description here

How can I make the binding work? The employee name that I enter in the polymer component should get displayed in application page. The property is marked as notify: true

Upvotes: 0

Views: 78

Answers (1)

tony19
tony19

Reputation: 138246

For data binding outside of a Polymer element, you'll need to use a dom-bind template:

<body>
  <template is="dom-bind">
    [[propertyName]]
  </template>
</body>

Also, emp-name$="{{employeeName}}" is using an attribute binding (i.e., $=), but in this case, you should use a property binding:

<demo-prep1 emp-name="{{employeeName}}">


HTMLImports.whenReady(() => {
  Polymer({
    is: 'demo-prep1',
    properties: {
      empName: {
        type: String,
        value: 'John Doe',
        notify: true
      }
    }
  });
});
<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <template is="dom-bind">
    <div class="vertical-section-container centered">
        <h3>Basic demo-prep1 demo</h3>
        <demo-prep1 emp-name="{{employeeName}}"></demo-prep1>
        Hello [[employeeName]]
        <input id="output_val" value="[[employeeName]]"></input>
      </div>
  </template>
</body>

Upvotes: 2

Related Questions