Demo source
- <html>
- <head>
- <title>Express function for Polymer</title>
- <base href="https://cdn.rawgit.com/download/polymer-cdn/2.0.2/lib/">
- <link rel="import" href="polymer/polymer.html" />
- </head>
- <body>
- <h1>Expression</h1>
- <expressed-content count="15"></expressed-content>
- <dom-module id="expressed-content">
- <template>
- <template is="dom-repeat" items="[[sequences]]" as="item">
- <!-- This means: -->
- <!-- 1. sqrt(item) as $result -->
- <!-- 2. printText($result, item) as output -->
- <div>[[express(item, sqrt, printText, item)]]</div>
- </template>
- </template>
- <script>
- 'use strict';
- class ExpressedContent extends Polymer.Element {
- static get is() { return 'expressed-content'; }
- static get properties() {
- return {
- count: {
- type: Number,
- value: 10,
- observer: '_countChanged'
- },
- sequences: {
- type: Array
- }
- }
- }
- _countChanged(n, o) {
- n = Math.max(0, n * 1);
- let sequences = [];
- for (let i = 0; i < n; i++) {
- sequences.push(i + 1);
- }
- this.sequences = sequences;
- }
- /**
- * An express function instead of expression
- */
- express() {
- let args = [...arguments];
- // first argument should be first parameter
- let params = [args.shift()];
- // second argument should be a function
- let fn = args.shift();
- // arguments before next function will be additional parameters
- while (args[0] && typeof (args[0]) !== 'function') {
- params.push(args.shift());
- }
- // execute and receive result
- let nextMainParam = fn.call(this, ...params);
- // continue express when args is not empty
- return args.length === 0 ? nextMainParam : this.express(nextMainParam, ...args);
- }
- sqrt(n) {
- return n * n;
- }
- printText(n1, n2) {
- return `${n2} x ${n2} = ${n1}`;
- }
- }
- customElements.define(ExpressedContent.is, ExpressedContent);
- </script>
- </dom-module>
- </body>
- </html>