Skip to content

Instantly share code, notes, and snippets.

@d1manson

d1manson/test.html

Last active August 29, 2015 14:27
Show Gist options
  • Save d1manson/a8858a9f8b230c3b8eaa to your computer and use it in GitHub Desktop.
Save d1manson/a8858a9f8b230c3b8eaa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.html
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="x-child">
<template>
<div style="background:#ccc;display: inline-block;">
prop_read_write: <span>[[prop_read_write]]</span><br>
prop_read_only: <span>[[prop_read_only]]</span><br>
</div>
</template>
<script>
Polymer({
is: 'x-child',
_increment: function(){
if(this.do_inc){
this.prop_read_write = this.prop_read_write + 1;
this._setProp_read_only(this.prop_read_only + 1);
}
this.async(this._increment, 1000);
},
ready: function(){
this.async(this._increment, 1000);
},
properties: {
prop_read_write:{
type: Number,
value: 1,
notify: true
},
prop_read_only:{
type: Number,
value: 101,
notify: true,
readOnly: true
},
do_inc:{
type: Boolean,
value: false,
}
}})
</script>
</dom-module>
<dom-module id="x-parent">
<template>
parent_a: <span>[[parent_a]]</span>, parent_b: <span>[[parent_b]]</span><br>
<x-child prop_read_write="{{parent_a}}" prop_read_only="{{parent_b}}"></x-child>
<br>intialised as: parent_a: {type: Number, notify: true}, parent_b: {type: Number, notify: true}
<br><br>
<div style="margin-left:20px">
<template is="dom-repeat" items="{{kids}}">
child[<span>[[index]]</span>]: .a: <span>[[item.a]]</span>, .b: <span>[[item.b]]</span><br>
<x-child prop_read_write="{{item.a}}" prop_read_only="{{item.b}}" do_inc="[[item.do_inc]]"></x-child>
<br>intialised as: <span>[[item.description]]</span>
<br><br>
</template>
</div>
</template>
<script>
Polymer({
is:'x-parent',
properties: {
parent_a: {
type: Number,
notify: true
},
parent_b: {
type: Number,
notify: true
},
kids: {
type: Array,
value: function(){
return [{a: null, b: null, description: '{a: null, b: null}'},
{a: undefined, b: undefined, do_inc: true, description: '{a: undefined, b: undefined, do_inc: true}'},
{description: '{}'},
{a:-1,b:-101, description: '{a:-1, b:-101}'}]
},
notify: true
}
}
})
</script>
</dom-module>
</head>
<body>
<x-parent>
</x-parent>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment