Behavior to use Nuclear JS data in Polymer

nuclear-js-polymer-behavior-example.html

<!--
  Behavior to connect your NuclearJS app to Polymer.
  
  Add key 'bindNuclear' to your property with as value a
  valid NuclearJS getter.

  Adapted from the NuclearJS ReactJS mix-in:
  https://github.com/jordangarcia/nuclear-react-mixin
-->
<dom-module id='nuclear-example'>
  <template>
    Look, it's data from NuclearJS: <span>[[loaded]]</span>!
  </template>
</dom-module>

<script>
  function NuclearObserver(reactor) {
    return {
      attached: function() {
        var component = this;
        this.__unwatchFns = Object.keys(component.properties).reduce(
          function(unwatchFns, key) {
            if (!('bindNuclear' in component.properties[key])) {
              return unwatchFns;
            }
            var getter = component.properties[key].bindNuclear;

            if (!getter) {
              throw 'Undefined getter specified for key ' + key;
            }

            component[key] = reactor.evaluate(getter);

            return unwatchFns.concat(reactor.observe(getter, function(val) {
              component[key] = val;
            }));
        }, []);
      },

      detached: function() {
        while (this.__unwatchFns.length) {
          this.__unwatchFns.shift()();
        }
      },

    };
  }

  // assuming variable 'reactor' is your NuclearJS reactor.
  // assuming variable 'bootstrapGetter.isDataLoaded' is a NuclearJS getter
  // that returns a boolean.

  Polymer({
    is: 'nuclear-example',
    behaviors: [NuclearObserver(reactor)],
    properties: {
      loaded: {
        type: Boolean,
        bindNuclear: bootstrapGetters.isDataLoaded,
      },
    },
  })
</script>