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

2023年4月9日 210次阅读

目前我有我的申请的“新项目形式”.我使用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的同时,无缝地填充和标记它.我不想用相应的表单字段对数据进行硬编码.

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

最佳答案 我想到了！我从胡子中使用“倒置部分”得到了这个想法.

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

我做的是：

>而不是让ajax发送超过< option>的值并且有一个模板用于在< select>中填充它们,我在服务器端构建了我的模板,并用数据填充< select>选项.此外,我使用模板作为所选项目的“标记”.
>通过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
点赞