Как я могу сделать условный рендеринг с Mustache JS? - PullRequest
Новая
       11

Как я могу сделать условный рендеринг с Mustache JS?

1 голос
/ 21 сентября 2019

Вот как именно выглядят мои данные, возвращаемые с сервера: 

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

Для каждого из этих элементов я отображаю <li>, содержащий детали, но в зависимости от его [key].state.decision, яможет выбрать визуализацию по-другому или даже показать некоторые кнопки.Например, если элемент возвращается с state.decision: activate назад, мне придется скрыть кнопку установки и вместо этого показать активирующую кнопку.

Я сейчас рендерирую (используя более старую версию Усов) кактакие: 

/**
 * 
 * @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;
}

С шаблонами Усов: 

<!-- 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>

Возможно ли это?

...