More basics

README.md

@@ -16,7 +16,7 @@ Small, useful, snippets/samples that show how to do things the Polymer way.
 
 ## Contributing
 
-See [contributing.md](../contributing.md).
+See [contributing.md](contributing.md).
 
 ## Table of Contents
 
@@ -28,14 +28,16 @@ See [contributing.md](../contributing.md).
 - [Binding to a style](snippets/basics/binding-to-a-style.html)
 - [Using 'bind' to create a single template instance](snippets/basics/using-bind-to-create-a-single-template-instance.html)
 - [Finding Shadow DOM elements](snippets/basics/finding-shadow-dom-elements.html)
+- [Binding to a computed property](snippets/basics/binding-to-a-computed-property.html)
+- [Creating a one-time binding](snippets/basics/creating-a-one-time-binding.html)
 
 ### Control Flow
 
 - [Conditionally hiding an element](snippets/control-flow/conditionally-hiding-an-element.html)
 - [Getting the iteration index when looping over a collection](snippets/control-flow/getting-the-iteration-index-when-looping-over-a-collection.html)
 - [Looping over a collection using iterative templates](snippets/control-flow/looping-over-a-collection-using-iterative-templates.html)
 - [Using conditional templates](snippets/control-flow/using-conditional-templates.html)
-- [Using template repeat with a <tr> or an <option>](snippets/control-flow/using-template-repeat-with-a-tr-or-an-option.html)
+- [Using template repeat with a table row or an option](snippets/control-flow/using-template-repeat-with-a-tr-or-an-option.html)
 
 ### Forms
 
@@ -70,4 +72,3 @@ Snippets dealing with
 [Adding button rows](snippets/core-elements/core-toolbar/adding-button-rows.html)
 [Changing toolbar size](snippets/core-elements/core-toolbar/changing-toolbar-size.html)
 
-

snippets/basics/binding-to-a-computed-property.html

@@ -0,0 +1,57 @@
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!--
+# Binding to a Computed Property
+
+Shows data binding to a property that is computed based on other property
+values.
+
+Define computed properties in the `computed` object on the element’s prototype:
+
+    Polymer({
+      firstName: 'Rob',
+      lastName: 'Dodson',
+      computed: {
+        fullName: "firstName + ' ' + lastName"
+      }
+    });
+
+A computed property consists of a property name and a Polymer expression.
+When any value in the expression changes, the computed property updates.
+
+In this example, `fullName` is a computed property that updates whenever
+`firstName` or `lastName` change.
+
+Read the
+[official documentation for computed properties](http://www.polymer-project.org/docs/polymer/polymer.html#computed-properties).
+
+[jsbin](http://jsbin.com/cavob/edit)
+-->
+
+<link rel="import" href="../../components/polymer/polymer.html">
+
+<polymer-element name="my-element">
+  <template>
+    <label>First Name: </label>
+    <input type="text" value="{{firstName}}">
+    <label>Last Name: </label>
+    <input type="text" value="{{lastName}}">
+    <div>Full name: {{fullName}}</div>
+  </template>
+  <script>
+    Polymer({
+      firstName: 'Rob',
+      lastName: 'Dodson',
+      computed: {
+        fullName: "firstName + ' ' + lastName"
+      }
+    });
+   </script>
+</polymer-element>

snippets/basics/creating-a-one-time-binding.html

@@ -0,0 +1,39 @@
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!--
+# Creating a One Time Binding
+
+Shows simple use of **one-time data binding** in a Polymer element.
+
+Use **double square brackets** (`[[ ]]`) instead of double mustaches (`{{ }}`)
+to set up a one-time binding. The binding becomes inactive after Polymer sets
+the inital value for the bound property.
+
+Read the
+[official documentation for one-time bindings](http://www.polymer-project.org/docs/polymer/binding-types.html#one-time-bindings).
+
+[jsbin](http://jsbin.com/dojucu/edit)
+-->
+
+<link rel="import" href="../../components/polymer/polymer.html">
+
+<polymer-element name="my-element">
+  <template>
+    <label>Set value of color: </label>
+    <input type="text" value="{{color}}">
+    <p>Initial value of color: [[color]]</p>
+    <p>Current value of color: {{color}}</p>
+  </template>
+  <script>
+    Polymer({
+      color: 'red'
+    });
+  </script>
+</polymer-element>

snippets/basics/finding-shadow-dom-elements.html

@@ -0,0 +1,56 @@
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!--
+# Finding Shadow DOM elements
+
+Shows how to find elements inside the shadow DOM.
+
+You can find nodes in a Polymer element's shadow DOM that are tagged with an
+`id` attribute using `this.$.<id>` syntax:
+
+    findNodes: function() {
+      var div = this.$.myDiv;
+      ...
+    }
+
+The Polymer documentation refers to this as **automatic node finding**.
+
+Once you've located a shadow DOM node, you can query for child nodes:
+
+    findNodes: function() {
+      var div = this.$.myDiv;
+      div.querySelector('p').textContent = 'Found shadowDOM elements';
+    }
+
+Read the
+[official documentation for automatic node binding](http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding).
+
+[jsbin](http://jsbin.com/hofatu/edit)
+-->
+
+<link rel="import" href="../../components/polymer/polymer.html">
+
+<polymer-element name="my-element">
+  <template>
+    <div id="myDiv">
+      <p></p>
+      <button on-tap="{{findNodes}}">Find nodes</button>
+    </div>
+  </template>
+  <script>
+    Polymer({
+      message: '',
+      findNodes: function() {
+        var div = this.$.myDiv;
+        div.querySelector('p').textContent = 'Found shadow DOM elements';
+      }
+    });
+  </script>
+</polymer-element>

tests/all.html

@@ -18,6 +18,9 @@
     htmlTest('binding-to-a-property.html');
     htmlTest('binding-to-a-style.html');
     htmlTest('using-bind-to-create-a-single-template-instance.html');
+    htmlTest('finding-shadow-dom-elements.html');
+    htmlTest('binding-to-a-computed-property.html');
+    htmlTest('creating-a-one-time-binding.html');
   });
 
   htmlSuite('control flow', function() {

tests/binding-to-a-computed-property.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Binding to a complex object</title>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <script src="../components/platform/platform.js"></script>
+  <link rel="import" href="../components/polymer-test-tools/tools.html">
+  <script src="../components/polymer-test-tools/htmltest.js"></script>
+  <link rel="import" href="../snippets/basics/binding-to-a-computed-property.html">
+</head>
+<body>
+  <my-element></my-element>
+<script>
+  document.addEventListener('polymer-ready', function() {
+    var el = document.querySelector('my-element');
+    el.firstName = 'x';
+    el.lastName = 'y';
+    assert.equal(el.fullName, 'x y');
+    done();
+  });
+</script>
+</body>
+</html>

tests/creating-a-one-time-binding.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Creating a one time binding</title>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <script src="../components/platform/platform.js"></script>
+  <link rel="import" href="../components/polymer-test-tools/tools.html">
+  <script src="../components/polymer-test-tools/htmltest.js"></script>
+  <link rel="import" href="../snippets/basics/creating-a-one-time-binding.html">
+</head>
+<body>
+  <my-element></my-element>
+<script>
+  document.addEventListener('polymer-ready', function() {
+    var el = document.querySelector('my-element');
+    var input = el.shadowRoot.querySelector('input');
+    var paras = el.shadowRoot.querySelectorAll('p');
+    assert.equal(el.color, 'red');
+    assert.equal(input.value, 'red');
+    assert.match(paras[0].textContent, /red/);
+    assert.match(paras[1].textContent, /red/);
+    input.value = 'x';
+    // Needed because the binding is triggered using an on-input.
+    input.dispatchEvent(new Event('input'));
+
+    setTimeout(function() {
+      assert.match(paras[0].textContent, /red/);
+      assert.match(paras[1].textContent, /x/);
+      done();
+    }, 0);
+
+  });
+</script>
+</body>
+</html>

tests/finding-shadow-dom-elements.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Conditionally hiding an element tests</title>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <script src="../components/platform/platform.js"></script>
+  <link rel="import" href="../components/polymer-test-tools/tools.html">
+  <script src="../components/polymer-test-tools/htmltest.js"></script>
+  <link rel="import" href="../snippets/basics/finding-shadow-dom-elements.html">
+</head>
+<body>
+  <my-element></my-element>
+<script>
+  document.addEventListener('polymer-ready', function() {
+    var el = document.querySelector('my-element');
+    var div = el.$.myDiv;
+    var p = div.querySelector('p');
+    var button = div.querySelector('button');
+
+    assert.equal(p.textContent.trim(), '');
+
+    button.dispatchEvent(new Event('tap'));
+    window.setTimeout(function() {
+      assert.match(p.textContent.trim(), /Found/);
+      done();
+    }, 0);
+  });
+</script>
+</body>
+</html>