Popular Posts
JSON Foramter <html> <head>     <title>JSON Formater</title>     <style type="text/css">     body{         margin:... Wrong text encoding while Jsoup parse document While page encoding is different with content type encoding declaration. Jsoup will get wrong text decode content. To avoid this problem, As... Asynchronous and deferred JavaScript execution explained Normal execution <script> This is the default behavior of the <script> element. Parsing of the HTML code pauses while the scr...
Stats
Expression in polymer
Since Polymer doesn't support expression directly, I create an express function as expression alternative.

Demo

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>