JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<base href="https://polygit.org/*+:master/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">

<dom-module id="x-foo">
  <template>
    <paper-button on-tap="useMemberFn_">test 1</paper-button>
    <paper-button on-tap="useAnonFn_">test 2</paper-button>
    <paper-button on-tap="useThisDotSet_">test 3</paper-button>
    <div>Rand: [[rand]]</div>
  </template>
</dom-module>

<x-foo></x-foo>

JavaScript

Polymer({
  is: 'x-foo',
  properties: { rand: Number, },
  
  /** Member function. */
  useMemberFn_: function() {
    cr.randomApi.getRandomEvent.addListener(
      this.onRandomEvent_.bind(this));
  },
  
  onRandomEvent_: function(rand) {
    this.rand = rand;
  },
  
  /** Anonymous function. */
  useAnonFn_: function() {
    cr.randomApi.getRandomEvent.addListener(
        function(rand) {
          this.rand = rand;
        }.bind(this));
  },
  
  /** Bind this.set. */
  useThisDotSet_: function() {
    cr.randomApi.getRandomEvent.addListener(
        this.set.bind(this, 'rand'));
  },
});

var cr = {
  randomApi: {
    getRandomEvent: {
      addListener: function(callback) {
        setTimeout(function() {
          callback(Math.random().toFixed(4));
        });
}}}};