创建带有胡子的动态下拉列表

Question

bounty到期在3天内。这个问题的答案有资格获得+ 50声望赏金。steros希望对此问题进行“ [吸引更多的关注]”：“不要指望一个完整的解决方案，而只是一条通往最终解决方案的道路，因为我不知道回合的胡子。谢谢！”

我具有以下结构：

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

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

我不知道该如何留胡子。我可以使用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时的情况。

我具有以下结构：[“键1”：[“ val1”，“ val2”，“ val3”]，“键2”：[“键3”：[“ val4”]，“键4”： [“ val5”]]我想从中生成下拉菜单。 “键1” ...将是...

Answer 1

Mustache是logic-less模板语法，因为没有if语句，else子句或for循环。相反，只有标签。一些标签被替换为一个值，而另一些则被替换为一系列值。