Last active
October 17, 2016 19:01
-
-
Save larsgk/af4618b622302bb1379f8dd2d5a6a21c to your computer and use it in GitHub Desktop.
(Hacky/crappy) Workaround for missing expressions in polymer 1.x
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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() & 0x3 = 3 <span>(in template: "3")</span><br> | |
_eval hack: _getValue() & 0x3 = 3 <span>(in template: "[[_eval('this._getValue() & 0x3')]]")</span><br> | |
Expression: _getValue() & 0x3 = [[_getValue() & 0x3]] <span>(in template: "[[_getValue() & 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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. [­[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 = [[_eval('1 + 2')]] <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() & 0x3 = 3 <span>(in template: "3")</span><br> | |
_eval hack: _getValue() & 0x3 = [[_eval('this._getValue() & 0x3')]] <span>(in template: "[­[_eval('this._getValue() & 0x3')]­]")</span><br> | |
Expression: _getValue() & 0x3 = [[_getValue() & 0x3]] <span>(in template: "[­[_getValue() & 0x3]­]")</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: "[­[_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) = [[_eval('Math.floor(1.2)')]] <span>(in template: "[­[_eval('Math.floor(1.2)')]­]")</span><br> | |
Expression: Math.floor(1.2) = [[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> | |
</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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Updated the gist with a property change example (random 'someval')