javascript - 在 mustache 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

我想通了!我的想法来自于在 mustache 中使用“倒置部分”。

我在上面所做的那个似乎是一个死胡同，或者如果我继续它，我会使一切复杂化。

我所做的是:

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

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

最终结果:

//build from the server-side ready with options, and with "markers

<select name="customerOrder">
    <option value="1" {{#order}}{{#i1}}selected="selected"{{/i1}}{{/order}}>Meat Lover's Pizza</option>
    <option value="2" {{#order}}{{#i2}}selected="selected"{{/i2}}{{/order}}>Supreme</option>
</select>

//JSON "edit-mode" data

{
    "order": {
        "i2":true // this will render the "selected" attribute on the one with "i2"
    }             // refer to "non-empty" list and "inverted sections"
}                 // http://mustache.github.com/mustache.5.html