StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><code>result</code> is a property on your element just like <code>times</code> and <code>value</code>. You can access it from outside JS, as you would any property on a normal HTML element. For example:</p> <pre><code><value-box value="2" times="10"></value-box> <script> document.querySelector('value-box').result; </script> </code></pre> <p>Internal to your element, what you want is to keep the <code>result</code> computed property up to date as <code>times</code>/<code>value</code> change. There are a couple of ways to do that. One is to use <code><property>Changed</code> watchers [<a href="http://www.polymer-project.org/polymer.html#change-watchers">1</a>]:</p> <pre><code><element name="value-box" attributes="value times result"> <template> <p>result: {{result}}</p> </template> <script> Polymer.register(this, { valueChanged: function() { this.result = this.value * this.times; }, timesChanged: function() { this.result = this.value * this.times; } }); </script> </element> </code></pre> <p>Demo: <a href="http://jsbin.com/idecun/2/edit">http://jsbin.com/idecun/2/edit</a></p> <p>Alternatively, you can use a getter for <code>result</code>:</p> <pre><code> Polymer.register(this, { get result() { return this.value * this.times; } }); </code></pre> <p>Demo: <a href="http://jsbin.com/oquvap/2/edit">http://jsbin.com/oquvap/2/edit</a></p> <p><strong>Note</strong> For this second case, if the browser doesn't support <code>Object.observe</code>, Polymer will setup a timer to dirty check <code>result</code>. This is why you see "here" printed in the console for this second example. Run the same thing in Chrome Canary with "Experimental WebKit features" enabled in <code>about:flags</code>, and you won't see the timer. Yet another reason why I can't wait for <code>Object.observe</code> to be everywhere! :)</p> <p>Hope this helps.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload