mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
332 lines
12 KiB
HTML
332 lines
12 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
|
|
<title>x-repeat</title>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<script src="../../../perf-lib/perf.js"></script>
|
|
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
<link rel="import" href="../../polymer.html">
|
|
<link rel="import" href="../../../layout/layout.html">
|
|
<!-- <link rel="import" href="../../src/lib/expr/observe-js-behavior.html"> -->
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
|
|
<dom-module id="x-labeled-input">
|
|
<style>
|
|
:host {
|
|
width: 400px
|
|
}
|
|
#label {
|
|
width: 200px;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid gray;
|
|
border-bottom-style: dashed;
|
|
}
|
|
input {
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|
|
<template>
|
|
<div class="layout horizontal">
|
|
<span id="label" class="flex">{{label}}</span>
|
|
<input value="{{value::input}}" disabled$="{{disabled}}">
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="x-observe">
|
|
<template><div>{{items.0.items}}</div></template>
|
|
</dom-module>
|
|
|
|
<dom-module id="x-test">
|
|
<style>
|
|
.outer {
|
|
padding: 10px;
|
|
}
|
|
.column {
|
|
width: 400px;
|
|
overflow: auto;
|
|
}
|
|
.item {
|
|
margin: 5px;
|
|
margin-left: 10px;
|
|
margin-right: 0;
|
|
padding: 5px;
|
|
padding-right: 0;
|
|
background-color: rgba(0,0,0,0.1);
|
|
}
|
|
.index {
|
|
display: inline-block;
|
|
background-color: gray;
|
|
color: white;
|
|
padding: 4px;
|
|
margin-bottom: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
<template>
|
|
|
|
<!-- <x-observe items="{{items}}"></x-observe> -->
|
|
|
|
<div class="fit layout vertical">
|
|
|
|
<div class="outer">
|
|
<div>{{a.b.c}}</div>
|
|
<div class="index">Outer scope:</div>
|
|
<x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
|
|
<x-labeled-input label="outerB" value="{{outerB}}"></x-labeled-input>
|
|
<x-labeled-input label="outerC" value="{{outerC}}"></x-labeled-input>
|
|
<x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
|
|
<x-labeled-input label="outerObjB.value" value="{{outerObjB.value}}"></x-labeled-input>
|
|
<x-labeled-input label="outerObjC.value" value="{{outerObjC.value}}"></x-labeled-input>
|
|
</div>
|
|
|
|
<div class="layout horizontal flex">
|
|
|
|
<div class="column flex">
|
|
<template is="x-repeat" id="xr1-1" items="{{items}}" as="item" inner-as="inner">
|
|
<div class="item" id="xr1-1" idx$="{{index}}">
|
|
<div class="index">idx: <span>{{index}}</span></div>
|
|
<button on-click="changeOuterA">Change outerA</button>
|
|
<button on-click="changeItemName">Change item.name</button>
|
|
<button on-click="changeInnerA">Change innerA</button>
|
|
<x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
|
|
<x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
|
|
<x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
|
|
<x-labeled-input label="inner.a" value="{{inner.a}}"></x-labeled-input>
|
|
<x-labeled-input label="inner.b" value="{{inner.b}}"></x-labeled-input>
|
|
<x-labeled-input label="computeInner(inner.a, inner.b)" value="{{computeInner(inner.a, inner.b)}}" disabled></x-labeled-input>
|
|
<template is="x-repeat" id="xr1-2" idx$="{{index}}" items="{{item.items}}" as="itemB">
|
|
<div class="item" id="xr1-2" idx$="{{index}}">
|
|
<div class="index">idx: <span>{{index}}</span></div>
|
|
<button on-click="changeOuterB">Change outerB</button>
|
|
<button on-click="changeItemName">Change item.name</button>
|
|
<x-labeled-input label="itemB.name" value="{{itemB.name}}"></x-labeled-input>
|
|
<x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
|
|
<x-labeled-input label="outerB" value="{{outerB}}"></x-labeled-input>
|
|
<x-labeled-input label="outerObjB.value" value="{{outerObjB.value}}"></x-labeled-input>
|
|
<template is="x-repeat" id="xr1-3" idx$="{{index}}" items="{{itemB.items}}" as="itemC">
|
|
<div class="item" id="xr1-3" idx$="{{index}}">
|
|
<div class="index">idx: <span>{{index}}</span></div>
|
|
<button on-click="changeOuterC">Change outerC</button>
|
|
<button on-click="changeItemName">Change item.name</button>
|
|
<x-labeled-input label="itemC.name" value="{{itemC.name}}"></x-labeled-input>
|
|
<x-labeled-input label="itemB.name" value="{{itemB.name}}"></x-labeled-input>
|
|
<x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
|
|
<x-labeled-input label="outerC" value="{{outerC}}"></x-labeled-input>
|
|
<x-labeled-input label="outerObjC.value" value="{{outerObjC.value}}"></x-labeled-input>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="column flex">
|
|
<template is="x-repeat" id="xr2-1" items="{{items}}" as="item" inner-as="inner">
|
|
<div class="item" id="xr2-1" idx$="{{index}}">
|
|
<div class="index">idx: <span>{{index}}</span></div>
|
|
<button on-click="changeOuterA">Change outerA</button>
|
|
<button on-click="changeItemName">Change item.name</button>
|
|
<button on-click="changeInnerA">Change innerA</button>
|
|
<x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
|
|
<x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
|
|
<x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
|
|
<x-labeled-input label="inner.a" value="{{inner.a}}"></x-labeled-input>
|
|
<x-labeled-input label="inner.b" value="{{inner.b}}"></x-labeled-input>
|
|
<x-labeled-input label="computeInner(inner.a, inner.b)" value="{{computeInner(inner.a, inner.b)}}" disabled></x-labeled-input>
|
|
<template is="x-repeat" id="xr2-2" idx$="{{index}}" items="{{item.items}}" as="itemB">
|
|
<div class="item" id="xr2-2" idx$="{{index}}">
|
|
<div class="index">idx: <span>{{index}}</span></div>
|
|
<button on-click="changeOuterB">Change outerB</button>
|
|
<button on-click="changeItemName">Change item.name</button>
|
|
<x-labeled-input label="itemB.name" value="{{itemB.name}}"></x-labeled-input>
|
|
<x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
|
|
<x-labeled-input label="outerB" value="{{outerB}}"></x-labeled-input>
|
|
<x-labeled-input label="outerObjB.value" value="{{outerObjB.value}}"></x-labeled-input>
|
|
<template is="x-repeat" id="xr2-3" idx$="{{index}}" items="{{itemB.items}}" as="itemC">
|
|
<div class="item" id="xr2-3" idx$="{{index}}">
|
|
<div class="index">idx: <span>{{index}}</span></div>
|
|
<button on-click="changeOuterC">Change outerC</button>
|
|
<button on-click="changeItemName">Change item.name</button>
|
|
<x-labeled-input label="itemC.name" value="{{itemC.name}}"></x-labeled-input>
|
|
<x-labeled-input label="itemB.name" value="{{itemB.name}}"></x-labeled-input>
|
|
<x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
|
|
<x-labeled-input label="outerC" value="{{outerC}}"></x-labeled-input>
|
|
<x-labeled-input label="outerObjC.value" value="{{outerObjC.value}}"></x-labeled-input>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
HTMLImports.whenReady(function() {
|
|
|
|
Polymer ({
|
|
is: 'x-labeled-input',
|
|
properties: {
|
|
value: {
|
|
notify: true
|
|
},
|
|
label: String,
|
|
disabled: Boolean
|
|
}
|
|
});
|
|
|
|
Polymer ({
|
|
is: 'x-observe',
|
|
behaviors: [
|
|
Polymer.ObserveJsBehavior
|
|
],
|
|
observers: [
|
|
'log(items.0.items.*)'
|
|
],
|
|
log: function(change) {
|
|
console.log(change);
|
|
}
|
|
});
|
|
|
|
Polymer ({
|
|
is: 'x-test',
|
|
|
|
behaviors: [
|
|
Polymer.ObserveJsBehavior
|
|
],
|
|
|
|
observers: [
|
|
'logStuff(outerObjA.*)'
|
|
],
|
|
|
|
logStuff: function(change) {
|
|
console.log(change);
|
|
},
|
|
|
|
properties: {
|
|
items: {
|
|
value: function() {
|
|
return [
|
|
{name: 'item 1', items: [
|
|
{name: 'item 1-1', items: [
|
|
{name: 'item 1-1-1'},
|
|
{name: 'item 1-1-2'},
|
|
{name: 'item 1-1-3'}
|
|
]},
|
|
{name: 'item 1-2', items: [
|
|
{name: 'item 1-2-1'},
|
|
{name: 'item 1-2-2'},
|
|
{name: 'item 1-2-3'}
|
|
]},
|
|
{name: 'item 1-3', items: [
|
|
{name: 'item 1-3-1'},
|
|
{name: 'item 1-3-2'},
|
|
{name: 'item 1-3-3'}
|
|
]}
|
|
]},
|
|
{name: 'item 2', items: [
|
|
{name: 'item 2-1', items: [
|
|
{name: 'item 2-1-1'},
|
|
{name: 'item 2-1-2'},
|
|
{name: 'item 2-1-3'}
|
|
]},
|
|
{name: 'item 2-2', items: [
|
|
{name: 'item 2-2-1'},
|
|
{name: 'item 2-2-2'},
|
|
{name: 'item 2-2-3'}
|
|
]},
|
|
{name: 'item 2-3', items: [
|
|
{name: 'item 2-3-1'},
|
|
{name: 'item 2-3-2'},
|
|
{name: 'item 2-3-3'}
|
|
]}
|
|
]},
|
|
{name: 'item 3', items: [
|
|
{name: 'item 3-1', items: [
|
|
{name: 'item 3-1-1'},
|
|
{name: 'item 3-1-2'},
|
|
{name: 'item 3-1-3'}
|
|
]},
|
|
{name: 'item 3-2', items: [
|
|
{name: 'item 3-2-1'},
|
|
{name: 'item 3-2-2'},
|
|
{name: 'item 3-2-3'}
|
|
]},
|
|
{name: 'item 3-3', items: [
|
|
{name: 'item 3-3-1'},
|
|
{name: 'item 3-3-2'},
|
|
{name: 'item 3-3-3'}
|
|
]},
|
|
]}
|
|
];
|
|
}
|
|
},
|
|
outerA: {
|
|
value: 'outerA'
|
|
},
|
|
outerB: {
|
|
value: 'outerB'
|
|
},
|
|
outerC: {
|
|
value: 'outerC'
|
|
},
|
|
outerObjA: {
|
|
value: function() { return { value: 'outerObjA.value' }; }
|
|
},
|
|
outerObjB: {
|
|
value: function() { return { value: 'outerObjB.value' }; }
|
|
},
|
|
outerObjC: {
|
|
value: function() { return { value: 'outerObjC.value' }; }
|
|
}
|
|
},
|
|
changeOuterA: function() {
|
|
this.outerA = this.outerA + 'A';
|
|
},
|
|
changeOuterB: function() {
|
|
this.outerB = this.outerB + 'B';
|
|
},
|
|
changeOuterC: function() {
|
|
this.outerC = this.outerC + 'C';
|
|
},
|
|
changeItemName: function(e) {
|
|
e.model.set('item.name', e.model.item.name + '*');
|
|
},
|
|
changeInnerA: function(e) {
|
|
e.model.set('inner.a', (e.model.inner.a || '') + 'A');
|
|
},
|
|
computeInner: function(a, b) {
|
|
return a + '-' + b;
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
<script>console.perf && console.perf();</script>
|
|
|
|
<x-test class="fit"></x-test>
|
|
|
|
<script>setTimeout(function() { console.perf && console.perfEnd(); });</script>
|