title: How can I do conditional rendering with Mustache JS?
body: <p>Here's how my data looks exactly, coming back from the server:</p>
  
  <pre><code>[
    {
      "sprout-framework": {
        "state": {
          "string": "Activate",
          "decision": "activate"
        },
        "data": [
          {
            "name": "Sprout Framework",
            "slug": "sprout-framework",
            "source": "C:\\xampp\\htdocs\\wordpress/wp-content/themes/amaranth/Includes/Plugins/sprout-framework.zip",
            "required": true,
            "version": "1.0",
            "force_activation": false,
            "force_deactivation": false,
            "external_url": "",
            "is_callable": "",
            "file_path": "sprout-framework/index.php",
            "source_type": "bundled"
          }
        ]
      }
    },
    {
      "elementor": {
        "state": {
          "string": "Install",
          "decision": "install"
        },
        "data": [
          {
            "name": "Elementor",
            "slug": "elementor",
            "source": "C:\\xampp\\htdocs\\wordpress/wp-content/themes/amaranth/Includes/Plugins/elementor.2.1.6.zip",
            "required": false,
            "version": "2.1.6",
            "force_activation": false,
            "force_deactivation": false,
            "external_url": "",
            "is_callable": "",
            "file_path": "elementor",
            "source_type": "bundled"
          }
        ]
      }
    }
  ]
  </code></pre>
  
  <p>For each one of these items, I render a <code>&lt;li&gt;</code> containing the details but depending on its <code>[key].state.decision</code>, I might choose to render it different or even show some buttons. For example, if an item comes back with the <code>state.decision: activate</code> back, I will have to hide the install button and instead show the activate one.</p>
  
  <p>I'm currently rendering (using an older version of Mustache) as such:</p>
  
  <pre><code>/**
   * 
   * @param {*} pluginsData 
   */
  const generateRequriedPluginsMarkup = (pluginsData) =&gt; {
      const allPluginsTemplate = $('#plugins-to-install-list');
      const individualPluginTemplate = $('#plugins-to-install-item');
  
      let html = '';
  
      for(let i = 0; i &lt; pluginsData.length; i++) {
          for(const property in pluginsData[i]) {
              if (pluginsData[i].hasOwnProperty(property)) {
                  html += mustache(individualPluginTemplate.html(), {
                      'pluginSlug': pluginsData[i][property].data[0].slug,
                      'pluginState': pluginsData[i][property].state.decision,
                      'pluginName': pluginsData[i][property].data[0].name,
                      'translatedText_installPlugin': 'Install',
                      'translatedText_activatePlugin': 'Activate'
                  });
              }
          }
      }
  
      html = mustache(allPluginsTemplate.html(), {
          plugins: html
      });
  
      return html;
  }
  </code></pre>
  
  <p>With the Mustache templates being:</p>
  
  <pre><code>&lt;!-- Plugins to Install --&gt;
  &lt;script type="template/mustache" id="plugins-to-install-list"&gt;
      &lt;ul id="plugins-to-install-list"&gt;
          {{{plugins}}}
      &lt;/ul&gt;
  &lt;/script&gt;
  
  &lt;!-- Plugins to Install Item--&gt;
  &lt;script type="template/mustache" id="plugins-to-install-item"&gt;
      &lt;li id="install-plugin-{{{pluginSlug}}}" class="plugin-to-install" data-state="{{{pluginState}}}" data-failed="no" data-installed="no" data-activated="no"&gt;
          &lt;h4 class="plugin-name"&gt;{{{pluginName}}}&lt;/h4&gt;
          &lt;div class="plugin-buttons"&gt;
              &lt;button class="install-plugin"&gt;{{{translatedText_installPlugin}}}&lt;/button&gt;
              &lt;button class="activate-plugin hidden"&gt;{{{translatedText_activatePlugin}}}&lt;/button&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Is this possible?</p>