填写并选择胡子JS中的选择框

Question

目前我的申请表中有“新项目表”。我使用mustacheJS作为它的模板。有些字段需要数据库中的数据，通过ajax发送。例如，某个选择框。

<select name="customerOrder">
    {{#order}} <option value="{{id}}">{{itemName}}</option> {{/order}}
</select>

用这些项填充的数据如下所示：

{
    "order": [
        {
            "id":1,
            "itemName":"Meat Lover's Pizza"
        }, //and so on...
    ]
}

工作正常，直到我要创建编辑表单，其中除了填写选择框和复选框的表单数据之外，我现在必须将表单元素标记为已选中。然而...

在另一个ajax调用上检索项数据，因此另一个JSON对象。我不一定合并，因为数据可能具有不同的结构。我本可以尝试this approach，但这意味着表单数据和项目数据将是“一个” - 我不希望这样。我希望明确区分有形数据和非有形数据

项目数据基本上看起来像这样，但可以嵌套在JSON对象的某处：

{
    "customer":"mario",
    "order": 1          --> this item i want selected in the form
    //and so on...
}

如果只有一些方法来构建表单，那么在使用mustache JS的同时，无缝地填充和标记它。我不想用相应的表单字段对数据进行硬编码。

我听说过运行时渲染和部分，但我似乎无法看到我如何使用它们。

Answer 1

我明白了！我从胡子中使用“倒置部分”得到了这个想法。

我上面做的那个似乎是一个死胡同，或者如果我追求它，我会使一切变得复杂。

我做的是：

1. 不是让ajax发送<option>的值并且有一个模板用于填充<select>，我在服务器端构建了我的模板并填充{{1数据的选项。此外，我使用模板作为所选项目的“标记”。

2. 通过ajax获取的唯一内容是项目数据。我改变了JSON对象的结构以适应构建的模板。我没有交出数据，而是交出了“标记”

最终结果：

<select>