Posts
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>
