javascript - 创建带有 mustache 的动态下拉菜单

Question

我有以下结构:

[
 "key 1": [ "val1", "val2", "val3" ],
 "key 2": [
  "key 3": [ "val4" ],
  "key 4": [ "val5" ]
 ]
]

我想从中生成下拉菜单。 “key 1”...将是可选名称，“val1”...值。如果所选键上有一个子数组，我想使用这些值动态创建另一个下拉列表，直到子数组只有一个值。 (如“key 2”的情况)

我不知道如何继续留着 mustache 。我可以使用 Object.keys 将第一级的所有键放入平面数组中，但我什至无法生成第一个下拉列表。更不用说我知道如何搭配另一部分。

如果能得到一个关于如何完成它的总体方向，那就太好了。

这里是一些示例代码:

  const view = {
    files: getFiles(),
    "keys": function() {
      return Object.keys(this);
    }
  };

    <form>
      <select id="selector">
        <option>choose...</option>
        {{#files}}
          {{#keys}}
          <option value="">{{.}}</option>
          {{/keys}}
        {{/files}}
      </select>
    </form>

这是一个线框图，上面是选择key1时的第一种情况，下面是选择key2时的情况。

Answer 1

Mustache是一种无逻辑模板语法，因为没有 if 语句、else 子句或 for 循环。相反，只有标签。有些标签被替换为一个值，有些标签什么也不替换，还有一些则被替换为一系列值。

因此，您无法使用 mustache 根据所选值更新呈现的 HTML。

这里，我使用 onchange 事件，使用没有 mustache 模板的纯 Javascript，根据先前选择的值动态创建选择

var data = {
  "key 1": ["val1", "val2", "val3"],
  "key 2": {
    "key 3": ["val4"],
    "key 4": ["val5"]
  }
}

function renderSelect(obj) {
  var array = Array.isArray(obj) ? obj : Object.keys(obj)
  var options = ['Choose', ...array].map(i => "<option>" + i + "</option>").join('')

  var select = document.createElement('select')
  select.innerHTML = options
  if (!Array.isArray(obj)) {
    select.onchange = function() {
      // remove next siblings
      var sib = [], el = this
      while (el = el.nextElementSibling) sib.push(el)
      sib.forEach(el => el.remove())
      // render select based on value
      renderSelect(obj[this.value])
    }
  }

  document.querySelector('form').insertAdjacentElement('beforeend', select);
}

renderSelect(data)

<form></form>