Ajaxを使用してJadeのドロップダウンリストに追加する

Question

私は以下のように自分の.jadeファイルで定義したドロップダウンリストにエントリを追加しようとしています。

extends layout 

block content 
    script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js') 
    script(src='/javascripts/addsystem.js') 
    h1= title 
    p Testing 


    select#allSystems 

は、そして、私のAjaxの方法は、以下のようになります。

var select = $('#allSystems'); 
console.log("Runing script") 


$.ajax({ 
    url: '/submit/getAllSystems', 
    dataType:'JSON', 
    success:function(data){ 

    $.each(test.system, function(key, val) { 
     select.append('<option id="' + val.id + '">' + val.name + '</option>'); 
    }) 
    } 
}); 

Ajaxのスクリプトはジェイドファイルに含まれてJSファイルに位置しています。 （JqueryはJadeファイルにも含まれています）。

すべてが正常に動作しているようですが、追加を除いては問題ありません。私。コンソール・ログには良好なデータがすべて表示され、Ajaxスクリプトにselectオブジェクトを出力すると、ブラウザはそれをHTML要素として認識します。

ランニング印刷 "はconsole.log（選択）を;"、Firefoxのコンソールは次のことを示しています

Object { context: HTMLDocument → submit, selector: "#allSystems" } 

私が間違ってやっている任意のアイデアを？

Answer 1

ジェイドは、HTMLをレンダリングするためにデータとともにコンパイルして実行する必要があるテンプレート言語です。 JQueryはそれを自動的には行いません。そのため、あなたのコメントアウトされた試行はselect.appendに失敗しました。

自分でHTMLを構築することはできます（ただし、コードが醜いですが、文字列の連結は嫌いです）。しかし、あなたはそれを.appendToに変更しました。これはあなたのselectオブジェクトを取り出して、optionに追加します。これはあなたが望むものではないと思います。それでも解決しない場合は

select.append('<option id="' + val.id + '">' + val.name + '</option>'); 

、そしてあなたにselect変数を取得し、あなたのセレクタで何かがあります：

はこの打撃を与えます。

* EDIT *私はあなたがDOMの残りの部分の前に、スクリプトをロードしているあなたのジェイドに気づく 。 addsystem.jsの内容があなたの記述どおりであれば、データを取り出してまだ存在しないDOMノードに追加しようとしています。

$(function(){ /** your code **/ }) 

DOMが完全に読み込まれた後にjQueryのメソッドを実行する方法の略です。