JSFiddle - React, Tailwind, and code Playground

by senica

HTML

<script src="https://cdn.jsdelivr.net/riot/2.4/riot+compiler.min.js"></script>
<script type="riot/tag">
  <node>
    <div class="card-wrapper">
      <div class="card">
        <div class="card-action">
          <a href="" onclick={toggleMarker}><i class="material-icons {node.marker ? 'blue-text text-darken-1' : 'grey-text'}">thumb_up</i></a>
        </div>
        <div class="card-content" onclick={toggleChildren}>
          <span class="card-title activator grey-text text-darken-4">
            <span>{getTitle()}</span>
          </span>
        </div>
      </div>
    </div>
    <div class="aside">
      <node each={child, i in node.children} node={child}></node>
    </div>

      this.errors = false;
      this.loading = false;
      this.node = opts.node || {};

      /*this.on('mount', function(){
        this.update({
          node: this.opts.node,
        })
      })*/

      this.getTitle = function(){
        return (this.node.languages || []).filter(function(lang){
          return lang.encoding = 'en'; //app.project.language;
        })[0].title;
      }

      // do fun loading animation and errors
      this.toggleMarker = function(e){
        e.preventDefault();
        // ####  this.node works
        console.log('before', JSON.parse(JSON.stringify(this)));
        this.update({
          loading: true,
        })
        // ####  this.node is not defined anymore
        console.log('after', JSON.parse(JSON.stringify(this)));
      }

  </node>
</script>

<script type="riot/tag">
  <floor>
    <!-- each here is a fix for https://github.com/riot/riot/issues/1020 -->
      <node each={child, i in (project.node || {}).id ? [project.node]: []} node={child}></node>
  
    this.project = {};

    // Mimic AJAX request
    setTimeout(function(){
      this.project.node = {"languages":[{"node":"57463399dcaffe3d115da0ba","encoding":"en","title":"Blue kind ofsd block bob","verified":false,"content":"<div>Why is this undefined?<br /><br...

JavaScript

riot.mount('floor');