1

Here's how my data looks exactly, coming back from the server:

[
  {
    "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"
        }
      ]
    }
  }
]

For each one of these items, I render a <li> containing the details but depending on its [key].state.decision, I might choose to render it different or even show some buttons. For example, if an item comes back with the state.decision: activate back, I will have to hide the install button and instead show the activate one.

I'm currently rendering (using an older version of Mustache) as such:

/**
 * 
 * @param {*} pluginsData 
 */
const generateRequriedPluginsMarkup = (pluginsData) => {
    const allPluginsTemplate = $('#plugins-to-install-list');
    const individualPluginTemplate = $('#plugins-to-install-item');

    let html = '';

    for(let i = 0; i < 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;
}

With the Mustache templates being:

<!-- Plugins to Install -->
<script type="template/mustache" id="plugins-to-install-list">
    <ul id="plugins-to-install-list">
        {{{plugins}}}
    </ul>
</script>

<!-- Plugins to Install Item-->
<script type="template/mustache" id="plugins-to-install-item">
    <li id="install-plugin-{{{pluginSlug}}}" class="plugin-to-install" data-state="{{{pluginState}}}" data-failed="no" data-installed="no" data-activated="no">
        <h4 class="plugin-name">{{{pluginName}}}</h4>
        <div class="plugin-buttons">
            <button class="install-plugin">{{{translatedText_installPlugin}}}</button>
            <button class="activate-plugin hidden">{{{translatedText_activatePlugin}}}</button>
        </div>
    </li>
</script>

Is this possible?

coolpasta
  • 725
  • 5
  • 19
  • Post the code you wrote to render the tag – Baboo Sep 20 '19 at 22:32
  • Given that you object syntax is malformed, I find it hard to believe that that is how it is coming back from the server. – Taplar Sep 20 '19 at 22:32
  • @Baboo_ I've just updated my code with exactly what I'm doing. Frankly, I don't understand how me posting an incredible amount of code helps my issue here. I'm thankful for any help but if there's a way to do conditional rendering in Mustache, then it doesn't care about what I wrote. – coolpasta Sep 20 '19 at 22:43
  • @Taplar As per my other comment, again, I was simply giving an introduction to what I do to avoid posting an obnoxiously useless amount of code and was straight up asking about how to do a certain thing / if I should do it. If it's possible, then it doesn't care about what I did. – coolpasta Sep 20 '19 at 22:44
  • Understand though that it is low hanging fruit that we have to get out of the way. If you say something is 'exactly' something, and there is a problem with what you say it is, we have to address it first. – Taplar Sep 20 '19 at 22:45
  • @Taplar I understand. My question actually also has a very ugly extension, tho. What do I do when my template should change? For example, if I install the item, then the template corresponding to an installed item that needs to be activated must be used. Yet...I'm rendering the templates on load. I'm just really looking to see if these issues are taken care of by Mustache or if I should look at something else. – coolpasta Sep 20 '19 at 22:49
  • Possible duplicate of [How do I accomplish an if/else in mustache.js?](https://stackoverflow.com/questions/6027525/how-do-i-accomplish-an-if-else-in-mustache-js) – Baboo Sep 21 '19 at 06:07
  • @Baboo_ Indeed it is but...damn, it didn't come up in any of my searches. – coolpasta Sep 21 '19 at 12:02

0 Answers0