shailen/gist:7073a1adcbadeb01d08d

## gistfile1.txt
// The Polymer element.

<link rel="import" href="../components/polymer/polymer.html">
<polymer-element name="my-element">
  <template>
  <template if="{{!showAnswer}}">
      <div id="question">What is the answer to "The Ultimate Question of Life, the Universe, and Everything"?
      </div>
      <div id="show" on-click="{{enableShowAnswer}}">Show</div>
    </template>
    <template if="{{showAnswer}}">
      <div id="answer">42</div>
    </template>
  </template>
  <script>
    Polymer('my-element', {
      showAnswer: false,
      enableShowAnswer: function(e, detail, sender) {
        e.preventDefault();
        this.showAnswer = true;
      }
    });
  </script>
</polymer-element>

// The test.

<html>
<head>
  <meta charset="utf-8">
  <title>binding to a model</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/conditionally_rendering_a_template.html">
</head>
<body>
  <my-element></my-element>
<script>
  document.addEventListener('polymer-ready', function() {
    var el = document.querySelector('my-element');
    assert.isFalse(el.showAnswer);
    assert.isDefined(el.$.question);
    assert.isUndefined(el.$.answer);

    el.$.show.dispatchEvent(new Event('click'));
    setTimeout(function() {
      assert.isTrue(el.showAnswer); // PASSES
      assert.isUndefined(el.$.question); // FAILS. Should pass.
      assert.isDefined(el.$.answer); // FAILS. Should pass.
      done();
    }, 0);
  });
</script>
</body>
</html>
	// The Polymer element.

	<link rel="import" href="../components/polymer/polymer.html">
	<polymer-element name="my-element">
	<template>
	<template if="{{!showAnswer}}">
	<div id="question">What is the answer to "The Ultimate Question of Life, the Universe, and Everything"?
	</div>
	<div id="show" on-click="{{enableShowAnswer}}">Show</div>
	</template>
	<template if="{{showAnswer}}">
	<div id="answer">42</div>
	</template>
	</template>
	<script>
	Polymer('my-element', {
	showAnswer: false,
	enableShowAnswer: function(e, detail, sender) {
	e.preventDefault();
	this.showAnswer = true;
	}
	});
	</script>
	</polymer-element>

	// The test.

	<html>
	<head>
	<meta charset="utf-8">
	<title>binding to a model</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/conditionally_rendering_a_template.html">
	</head>
	<body>
	<my-element></my-element>
	<script>
	document.addEventListener('polymer-ready', function() {
	var el = document.querySelector('my-element');
	assert.isFalse(el.showAnswer);
	assert.isDefined(el.$.question);
	assert.isUndefined(el.$.answer);

	el.$.show.dispatchEvent(new Event('click'));
	setTimeout(function() {
	assert.isTrue(el.showAnswer); // PASSES
	assert.isUndefined(el.$.question); // FAILS. Should pass.
	assert.isDefined(el.$.answer); // FAILS. Should pass.
	done();
	}, 0);
	});
	</script>
	</body>
	</html>