口頭で選択ボックスを塗りつぶして選択する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を試してみることができましたが、これはフォームデータとアイテムデータが "1"になることを意味しました。私は、有形データの明確な分離、および非有形データ

は、アイテムデータは、基本的にはこのように見えますが、JSONオブジェクトのどこかに入れ子にすることができるとします

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

一部だけがあった場合その後、フォームを作成して、口頭でJSにシームレスに記入してマークします。私は、対応するフォームフィールドでデータをハードコードしたくありません。

私は実行時のレンダリングとパーシャルについて聞いたことがありますが、私はこれをどのように使用するのか分からないようです。

Answer 1

私はそれを理解しました！私は口ひげに「転倒した部分」を使うことからアイデアを得ました。

私が上記のようにしたことは行き止まりのように見えたが、私が追求した場合、私はすべてを複雑にしていただろう。

私がやったことだった。

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 
   

   ：代わりに、データの受け渡しのため、私の代わりに、 "マーカー"

最終結果を引き渡し