five-bells-visualization
Version:
Tool to visualize Five Bells payments
267 lines (263 loc) • 6.59 kB
HTML
<script>
window.data = [
{
prop: 'prop-1',
items: [
{
prop: 'prop-1-1',
items: [
{ prop: 'prop-1-1-1' },
{ prop: 'prop-1-1-2' },
{ prop: 'prop-1-1-3' }
]
},
{
prop: 'prop-1-2',
items: [
{ prop: 'prop-1-1-1' },
{ prop: 'prop-1-1-2' },
{ prop: 'prop-1-1-3' }
]
},
{
prop: 'prop-1-3',
items: [
{ prop: 'prop-1-1-1' },
{ prop: 'prop-1-1-2' },
{ prop: 'prop-1-1-3' }
]
},
]
},
{
prop: 'prop-2',
items: [
{
prop: 'prop-2-1',
items: [
{ prop: 'prop-2-1-1' },
{ prop: 'prop-2-1-2' },
{ prop: 'prop-2-1-3' }
]
},
{
prop: 'prop-2-2',
items: [
{ prop: 'prop-2-2-1' },
{ prop: 'prop-2-2-2' },
{ prop: 'prop-2-2-3' }
]
},
{
prop: 'prop-2-3',
items: [
{ prop: 'prop-2-3-1' },
{ prop: 'prop-2-3-2' },
{ prop: 'prop-2-3-3' }
]
},
]
},
{
prop: 'prop-3',
items: [
{
prop: 'prop-3-1',
items: [
{ prop: 'prop-3-1-1' },
{ prop: 'prop-3-1-2' },
{ prop: 'prop-3-1-3' }
]
},
{
prop: 'prop-3-2',
items: [
{ prop: 'prop-3-2-1' },
{ prop: 'prop-3-2-2' },
{ prop: 'prop-3-2-3' }
]
},
{
prop: 'prop-3-3',
items: [
{ prop: 'prop-3-3-1' },
{ prop: 'prop-3-3-2' },
{ prop: 'prop-3-3-3' }
]
},
]
}
];
</script>
<dom-module id="x-foo">
<template>
<x-bar id="bar"
prop="{{prop}}"
item-prop="{{itemProp}}"
parent-prop="{{parentProp}}"
parent-item-prop="{{parentItemProp}}"
parent-parent-prop="{{parentParentProp}}"
parent-parent-item-prop="{{parentParentItemProp}}"
parent-parent-parent-prop="{{parentParentParentProp}}"
parent-parent-parent-item-prop="{{parentParentParentItemProp}}">
</x-bar>
</template>
</dom-module>
<script>
Polymer({
is: 'x-foo',
properties: {
prop: {
notify: true
},
itemProp: {
notify: true
},
parentProp: {
notify: true,
},
parentItemProp: {
notify: true
},
parentParentProp: {
notify: true,
},
parentParentItemProp: {
notify: true
},
parentParentParentProp: {
notify: true,
},
parentParentParentItemProp: {
notify: true
}
}
});
Polymer({
is: 'x-bar',
properties: {
prop: {
notify: true
},
itemProp: {
notify: true
},
parentProp: {
notify: true,
},
parentItemProp: {
notify: true
},
parentParentProp: {
notify: true,
},
parentParentItemProp: {
notify: true
},
parentParentParentProp: {
notify: true,
},
parentParentParentItemProp: {
notify: true
}
}
});
</script>
<dom-module id="x-nested-repeat">
<template>
<template id="repeater" is="x-repeat" items="{{items}}">
<x-foo on-test1="testHandler1"
prop="{{prop}}"
item-prop="{{item.prop}}"
parent-prop="{{parent.prop}}"
parent-item-prop="{{parent.item.prop}}">
</x-foo>
<template is="x-repeat" items="{{item.items}}">
<x-foo on-test2="testHandler2"
prop="{{prop}}"
item-prop="{{item.prop}}"
parent-prop="{{parent.prop}}"
parent-item-prop="{{parent.item.prop}}"
parent-parent-prop="{{parent.parent.prop}}"
parent-parent-item-prop="{{parent.parent.item.prop}}">
</x-foo>
<template is="x-repeat" items="{{item.items}}">
<x-foo on-test3="testHandler3"
prop="{{prop}}"
item-prop="{{item.prop}}"
parent-prop="{{parent.prop}}"
parent-item-prop="{{parent.item.prop}}"
parent-parent-prop="{{parent.parent.prop}}"
parent-parent-item-prop="{{parent.parent.item.prop}}"
parent-parent-parent-prop="{{parent.parent.parent.prop}}"
parent-parent-parent-item-prop="{{parent.parent.parent.item.prop}}">
</x-foo>
</template>
</template>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'x-nested-repeat',
testHandler1Count: 0,
testHandler2Count: 0,
testHandler3Count: 0,
testHandler1: function() {
this.testHandler1Count++;
},
testHandler2: function() {
this.testHandler2Count++;
},
testHandler3: function() {
this.testHandler3Count++;
}
});
</script>
<dom-module id="x-nested-repeat-configured">
<template>
<template id="repeater" is="x-repeat" items="{{items}}">
<x-foo prop="{{prop}}"
item-prop="{{item.prop}}"
parent-prop="{{parent.prop}}"
parent-item-prop="{{parent.item.prop}}">
</x-foo>
<template is="x-repeat" items="{{item.items}}">
<x-foo prop="{{prop}}"
item-prop="{{item.prop}}"
parent-prop="{{parent.prop}}"
parent-item-prop="{{parent.item.prop}}"
parent-parent-prop="{{parent.parent.prop}}"
parent-parent-item-prop="{{parent.parent.item.prop}}">
</x-foo>
<template is="x-repeat" items="{{item.items}}">
<x-foo prop="{{prop}}"
item-prop="{{item.prop}}"
parent-prop="{{parent.prop}}"
parent-item-prop="{{parent.item.prop}}"
parent-parent-prop="{{parent.parent.prop}}"
parent-parent-item-prop="{{parent.parent.item.prop}}"
parent-parent-parent-prop="{{parent.parent.parent.prop}}"
parent-parent-parent-item-prop="{{parent.parent.parent.item.prop}}">
</x-foo>
</template>
</template>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'x-nested-repeat-configured',
properties: {
items: {
value: window.data
},
prop: {
value: 'outer',
},
item: {
value: function() { return {prop: 'outerItem'}; }
}
}
});
</script>