Заполнение и выбор выбора в усах JS - PullRequest
Новая
       11

Заполнение и выбор выбора в усах JS

4 голосов
/ 20 февраля 2012

в настоящее время у меня есть "форма нового элемента" для моего заявления.я использовал 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.я не могу обязательно слить, потому что данные могут быть разных структур.Я мог бы попробовать этот подход , но это означало, что данные формы и данные элемента были бы "одним" - я не хочу этого.я хочу четкое разделение материальных данных и нематериальных данных

данные элемента выглядят в основном так, но могут быть вложены где-то в объект JSON: 

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

еслибыл только какой-то способ построить форму, после этого заполнить и пометить ее без проблем, при этом используя JS для усов.я не хочу жестко кодировать данные с соответствующими им полями формы.

я слышал о рендеринге во время выполнения и частичностях, но не могу понять, как бы я их использовал для этого.

1 Ответ

2 голосов
/ 21 февраля 2012

Я понял это!Я понял идею использования «перевернутых участков» в усах.

То, что я сделал выше, казалось тупиком, или, если бы я его преследовал, я бы все усложнил.

То, что я сделал, было:

  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
...