teamdandelion · August 9, 2015 17:36
diff --git a/demo.html b/demo.html
 <!DOCTYPE html>
 <html>
 <head>
   <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
   <link rel="import" href="pk-string-input-array.html">
 </head>

 <body>
  <style>
    #demo {
      width: 300px;
    }
  </style>
    <template is="dom-bind">
      <pk-string-input-array id="demo" strings="{{strings}}" computed-object="{{obj}}"></pk-string-input-array>
      <p> Values Follow (Taken From `strings`) </p>
      <template is="dom-repeat" items="{{strings}}">
        <p> item: "<span>{{item}}</span>" </p>
      </template>
      <p> Values Follow (Taken from `computedObject.strings`)</p>
      <template is="dom-repeat" items="{{obj.strings}}">
        <p> item: "<span>{{item}}</span>" </p>
      </template>
      <p> computedObject.foo: <span>{{obj.foo}}</span></p>
    </template>
   <script>
   </script>
 </body>
 </html>
diff --git a/pk-string-input-array.html b/pk-string-input-array.html
 <!--
 @license
 Copyright (c) 2015 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
 -->

 <link rel="import" href="../../../bower_components/polymer/polymer.html">

 <link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">

 f
 <dom-module id="pk-string-input-array">
  <style>
    :host {
      display: block;
    }
    .container {
      width: 100%;
      border: 1px solid black;
    }

    .inputContainer {
      width: 100%;
      padding: 5px;
    }
    .rule-input {
      width: 80%;
      display: block;
      margin: 0 auto;
    }
    .banner {
      text-align: center;
    }
  </style>
  <template>
    <div class="container">
      <p class="banner">String Input</p>
      <template is="dom-repeat" items="{{strings}}">
        <div class="inputContainer">
          <iron-autogrow-textarea class="rule-input" bind-value="{{item}}"></iron-autogrow-textarea>
        </div>
      </template>
      <button on-click='toggleFoo'>ToogleFoo</button>
      </div>
  </template>
  <script>

    Polymer({
      is: "pk-string-input-array",
      properties: {
        "strings": {value: function(){return ["foo", "bar", ""]}, type: Array, notify: true},
        "foo": {value: true, type: Boolean},
        "computedObject": {computed: "_computeObject(strings, foo)", notify: true},
      },
      listeners: {
        'strings-changed': 'onStringsChanged',
        'computedObject-changed': 'onComputedObjectChanged',
      },
      _computeObject: function(strings, foo) {
        console.log("_computeObject was called");
        return {strings: strings, foo: foo}
      },

      toggleFoo: function() {
        this.foo = !this.foo;
      },

      // I'm mutating the strings array in its -changed handler - is that an antipattern?
      // I want to modify the list of strings so that there is always one spare box at the bottom
      // where the user can input another string, this feels like a hacky way to do it though.
      onStringsChanged: function(newStrings) {
        // if the last string is not an empty string, append one so there is always
        // a blank input for the user to write in
        if (this.strings.length === 0 || this.strings[this.strings.length-1] !== "") {
          this.push("strings", "")
        }

        // if any of the strings other than the last string are empty, remove them
        for (var i = 0; i<this.strings.length-1; i++) {
          if (this.strings[i] === "") {
            this.splice("strings", i, 1);
          }
        }
      },

      onComputedObjectChanged: function() {
        console.log("We got a change on the computed object. Great!");
      },
    });

  </script>
 </dom-module>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
	<link rel="import" href="pk-string-input-array.html">
	</head>

	<body>
	<style>
	#demo {
	width: 300px;
	}
	</style>
	<template is="dom-bind">
	<pk-string-input-array id="demo" strings="{{strings}}" computed-object="{{obj}}"></pk-string-input-array>
	<p> Values Follow (Taken From `strings`) </p>
	<template is="dom-repeat" items="{{strings}}">
	<p> item: "<span>{{item}}</span>" </p>
	</template>
	<p> Values Follow (Taken from `computedObject.strings`)</p>
	<template is="dom-repeat" items="{{obj.strings}}">
	<p> item: "<span>{{item}}</span>" </p>
	</template>
	<p> computedObject.foo: <span>{{obj.foo}}</span></p>
	</template>
	<script>
	</script>
	</body>
	</html>
	<!--
	@license
	Copyright (c) 2015 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
	-->

	<link rel="import" href="../../../bower_components/polymer/polymer.html">

	<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">

	f
	<dom-module id="pk-string-input-array">
	<style>
	:host {
	display: block;
	}
	.container {
	width: 100%;
	border: 1px solid black;
	}

	.inputContainer {
	width: 100%;
	padding: 5px;
	}
	.rule-input {
	width: 80%;
	display: block;
	margin: 0 auto;
	}
	.banner {
	text-align: center;
	}
	</style>
	<template>
	<div class="container">
	<p class="banner">String Input</p>
	<template is="dom-repeat" items="{{strings}}">
	<div class="inputContainer">
	<iron-autogrow-textarea class="rule-input" bind-value="{{item}}"></iron-autogrow-textarea>
	</div>
	</template>
	<button on-click='toggleFoo'>ToogleFoo</button>
	</div>
	</template>
	<script>

	Polymer({
	is: "pk-string-input-array",
	properties: {
	"strings": {value: function(){return ["foo", "bar", ""]}, type: Array, notify: true},
	"foo": {value: true, type: Boolean},
	"computedObject": {computed: "_computeObject(strings, foo)", notify: true},
	},
	listeners: {
	'strings-changed': 'onStringsChanged',
	'computedObject-changed': 'onComputedObjectChanged',
	},
	_computeObject: function(strings, foo) {
	console.log("_computeObject was called");
	return {strings: strings, foo: foo}
	},

	toggleFoo: function() {
	this.foo = !this.foo;
	},

	// I'm mutating the strings array in its -changed handler - is that an antipattern?
	// I want to modify the list of strings so that there is always one spare box at the bottom
	// where the user can input another string, this feels like a hacky way to do it though.
	onStringsChanged: function(newStrings) {
	// if the last string is not an empty string, append one so there is always
	// a blank input for the user to write in
	if (this.strings.length === 0 \|\| this.strings[this.strings.length-1] !== "") {
	this.push("strings", "")
	}

	// if any of the strings other than the last string are empty, remove them
	for (var i = 0; i<this.strings.length-1; i++) {
	if (this.strings[i] === "") {
	this.splice("strings", i, 1);
	}
	}
	},

	onComputedObjectChanged: function() {
	console.log("We got a change on the computed object. Great!");
	},
	});

	</script>
	</dom-module>