Skip to content

Instantly share code, notes, and snippets.

@larsgk
Last active October 17, 2016 19:01
Show Gist options
  • Save larsgk/af4618b622302bb1379f8dd2d5a6a21c to your computer and use it in GitHub Desktop.
Save larsgk/af4618b622302bb1379f8dd2d5a6a21c to your computer and use it in GitHub Desktop.
(Hacky/crappy) Workaround for missing expressions in polymer 1.x
<div>
<h1>Missing expression eval hack. Can we please get expressions in polymer2?</h1>
<span>In stead of writing e.g. [­[1 + 2]­], write [­[_eval('1 + 2')]­]</span><br>
<h4>Simple expressions</h4>
Plain text: 1 + 2 = 3 <span>(in template: "3")</span><br>
_eval hack: 1 + 2 = 3 <span>(in template: "[­[_eval('1 + 2']­]")</span><br>
Expresison: 1 + 2 = [[1 + 2]] <span>(in template: "[­[1 + 2]­]")</span><br>
<h4>Calling local functions (where this._getValue() returns 7)</h4>
Plain text: _getValue() &amp; 0x3 = 3 <span>(in template: "3")</span><br>
_eval hack: _getValue() &amp; 0x3 = 3 <span>(in template: "[­[_eval('this._getValue() &amp; 0x3')]­]")</span><br>
Expression: _getValue() &amp; 0x3 = [[_getValue() &amp; 0x3]] <span>(in template: "[­[_getValue() &amp; 0x3]­]")</span><br>
<h4>Using properties (where this.someval is set t orandom [0 - 9 every sec] - last: 7)</h4>
_eval hack: someval * 2 = 14 <span>(in template: "[­[_eval('this.someval * 2', someval)]­]")</span><br>
Expression: someval * 2 = [[someval * 2]] <span>(in template: "[­[someval * 2]­]")</span><br>
<span>(Note: we are exploiting that _eval() ignores extra params (for notifications) ;))</span><br>
<h4>Calling global functions</h4>
Plain text: Math.floor(1.2) = 1 <span>(in template: "1")</span><br>
_eval hack: Math.floor(1.2) = 1 <span>(in template: "[­[_eval('Math.floor(1.2)')]­]")</span><br>
Expression: Math.floor(1.2) = <span>(in template: "[­[Math.floor(1.2)]­]")</span><br>
<span>(Note: the last one throws an exception and prints nothing: "compute method `Math.floor` not defined")</span>
</div>
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="sans-expression-hack">
<template>
<div>
<style>
span {
color: #800;
font-size: 0.9em;
}
</style>
<h1>Missing expression eval hack. Can we please get expressions in polymer2?</h1>
<span>In stead of writing e.g. [&shy;[1 + 2]&shy;], write [&shy;[_eval('1 + 2')]&shy;]</span><br>
<h4>Simple expressions</h4>
Plain text: 1 + 2 = 3 <span>(in template: "3")</span><br>
_eval hack: 1 + 2 = [[_eval('1 + 2')]] <span>(in template: "[&shy;[_eval('1 + 2']&shy;]")</span><br>
Expresison: 1 + 2 = [[1 + 2]] <span>(in template: "[&shy;[1 + 2]&shy;]")</span><br>
<h4>Calling local functions (where this._getValue() returns 7)</h4>
Plain text: _getValue() & 0x3 = 3 <span>(in template: "3")</span><br>
_eval hack: _getValue() & 0x3 = [[_eval('this._getValue() & 0x3')]] <span>(in template: "[&shy;[_eval('this._getValue() & 0x3')]&shy;]")</span><br>
Expression: _getValue() & 0x3 = [[_getValue() & 0x3]] <span>(in template: "[&shy;[_getValue() & 0x3]&shy;]")</span><br>
<h4>Using properties (where this.someval is set t orandom [0 - 9 every sec] - last: {{someval}})</h4>
_eval hack: someval * 2 = [[_eval('this.someval * 2', someval)]] <span>(in template: "[&shy;[_eval('this.someval * 2', someval)]&shy;]")</span><br>
Expression: someval * 2 = [[someval * 2]] <span>(in template: "[&shy;[someval * 2]&shy;]")</span><br>
<span>(Note: we are exploiting that _eval() ignores extra params (for notifications) ;))</span><br>
<h4>Calling global functions</h4>
Plain text: Math.floor(1.2) = 1 <span>(in template: "1")</span><br>
_eval hack: Math.floor(1.2) = [[_eval('Math.floor(1.2)')]] <span>(in template: "[&shy;[_eval('Math.floor(1.2)')]&shy;]")</span><br>
Expression: Math.floor(1.2) = [[Math.floor(1.2)]] <span>(in template: "[&shy;[Math.floor(1.2)]&shy;]")</span><br>
<span>(Note: the last one throws an exception and prints nothing: "compute method `Math.floor` not defined")</span>
</div>
</template>
<script>
Polymer({
is: 'sans-expression-hack',
properties: {
someval: Number
},
attached: function() {
this.someval = 0;
setInterval(function() {
this.set('someval', Math.floor(Math.random()*10));
}.bind(this), 1000)
},
_eval: function(str) {
return eval(str);
},
_getValue: function() {
return 7;
}
});
</script>
</dom-module>
@larsgk
Copy link
Author

larsgk commented Oct 17, 2016

Updated the gist with a property change example (random 'someval')

@larsgk
Copy link
Author

larsgk commented Oct 17, 2016

screenshot from 2016-10-17 21 00 56

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment