Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
  
  <meta charset="utf-8">
​
  <title>Define a read-only, bindable property</title>
​
  <script src="http://www.polymer-project.org/platform.js"></script>
  <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
​
  <polymer-element name="count-element" attributes="count">
  <template>
​
    <style>
      :host {
        display: block;
      }
    </style>
​
    <p>You've clicked {{count}} times.</p>
    <button on-tap="{{increment}}">Click me</button>
​
  </template>
  <script>
​
    Polymer("count-element", {
​
      countChanged: function() {
        // make `count` readonly
        this.count = this._count;
      },
​
      increment: function() {
        this.count = ++this._count;
      },
​
      count: 0,
      _count: 0
​
    });
​
  </script>
  </polymer-element>
​
  <polymer-element name="test-element" noscript>
  <template>
​
    <count-element id="count" count="{{count}}"></count-element>
    <hr>
    Bound count value is {{count}}.
    <button on-tap="{{trySetCount}}">Set Count to -99</button>
​
  </template>
  <script>
​
    Polymer("test-element", {
​
      trySetCount: function() {
        this.count = -99;
        alert(this.count);
        this.async(function() {
          alert(this.count);
        });
      }
​
    });
​
  </script></polymer-element>
  
<body>
  
  <test-element></test-element>
​
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sjmilespro
0viewers