64 lines
2.0 KiB
HTML
64 lines
2.0 KiB
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
|
|
-->
|
|
|
|
<script src="../change_summary.js"></script>
|
|
<script src="constrain.js"></script>
|
|
<script src="persist.js"></script>
|
|
<script src="mdv-object-observe/include.js"></script>
|
|
|
|
<h1>Circles</h1>
|
|
<div data-controller="CircleController">
|
|
<template iterate>
|
|
<div style="border: 1px solid black; margin: 8px">
|
|
<table>
|
|
<tr><td>radius:</td><td><input type="number" value="{{ radius }}"></td></tr>
|
|
<tr><td>area:</td><td><input type="number" value="{{ area }}"></td></tr>
|
|
<tr><td>circumference:</td><td><input type="number" value="{{ circumference }}"></td></tr>
|
|
</table>
|
|
<button data-action="click:delete">Delete</button>
|
|
</div>
|
|
</template>
|
|
<button data-action="click:add">New</button>
|
|
</div>
|
|
<script>
|
|
|
|
function Circle(radius) {
|
|
// circumference = 2*PI*radius
|
|
constrain(this, {
|
|
radius: function() { return this.circumference / (2*Math.PI); },
|
|
circumference: function() { return 2 * Math.PI * this.radius; }
|
|
});
|
|
|
|
// area = PI*r^2'
|
|
constrain(this, {
|
|
area: function() { return Math.PI * Math.pow(this.radius, 2); },
|
|
radius: function() { return Math.sqrt(this.area / Math.PI); }
|
|
});
|
|
|
|
if (radius)
|
|
this.radius = radius;
|
|
}
|
|
|
|
function CircleController(elm) {
|
|
this.circles = elm.model = persistDB.retrieve(Circle);
|
|
}
|
|
|
|
CircleController.prototype = {
|
|
delete: function(circle) {
|
|
var index = this.circles.indexOf(circle);
|
|
this.circles.splice(index, 1);
|
|
},
|
|
|
|
add: function() {
|
|
this.circles.push(new Circle());
|
|
}
|
|
}
|
|
|
|
</script>
|