0

カテゴリでjQueryオートコンプリートを使用しています。正常に機能するデモコードを使用しました。現在、データベースのデータをドロップダウンに入力しようとしています。私は自分のビュー内でこのコードを使用しました：

:javascript
  $(function() {
      var data = [
          - Datasheet.find(:all).each do |ds|
            { label: "#{ds.title}", category: "Data Sheets" },
          - Brochure.find(:all).each do |br|
            { label: "#{br.title}", category: "Brochures" },

        $( "#search" ).catcomplete({
          delay: 0,
          source: data
      });
  });

しかし、私はエラーが発生しますundefined local variable or method 'ds' for #<#<Class:0x00000005c95a18>:0x00000005c8d570>

hamlとjavascriptを混ぜているからなのかわかりませんか？これを回避する別の方法はありますか？私が見ているのは、デモコードで機能する検索と呼ばれるテキストフィールドだけです。

4

1 に答える 1

2

などのフィルター内のコード:javascriptはHamlとして扱われず、フィルターを介して供給されるのは単なる文字列であるため、Hamlの他の部分のようには機能-し=ません。ただし、補間（つまり#{...}ブロック）を使用できます。実際、これがエラーの原因です"#{ds.title}"。Hamlでは、を評価しようとしdsていますが、に渡されたブロックのコンテキストでは評価していませんDatasheet.find。

#{}ブロックは複数行にまたがることができるため、コードを次のように変更できます。

:javascript
  $(function() {
      var data = [
          #{
          (Datasheet.find(:all).map do |ds|
            "{ label: \"#{ds.title}\", category: \"Data Sheets\" }"
          end +
          Brochure.find(:all).map do |br|
            "{ label: \"#{br.title}\", category: \"Brochures\" }"
          end).join(',')
          }
      ];

      $( "#search" ).catcomplete({
        delay: 0,
        source: data
      });
  });

eachここでは、を使用して各配列を反復処理する代わりに、を使用mapして新しい配列を作成し、次に+2つの配列を一緒に追加し、最後にを使用join(',')してそれらを1つの文字列に結合し、ページに挿入します。

ただし、これはかなり醜く扱いにくいコードです。この場合のより良い解決策は、配列を作成するコードをヘルパーに抽出し、Hamlからヘルパーを呼び出すことです。

ヘルパー：

def datasheet_array
  Datasheet.find(:all).map do |ds|
    "{ label: \"#{ds.title}\", category: \"Data Sheets\" }"
  end
end

def brochure_array
  Brochure.find(:all).map do |br|
    "{ label: \"#{br.title}\", category: \"Brochures\" }"
  end
end

def array_for_js
  "[#{(datasheet_array + brochure_array).join(',')}]"
end

そうすれば、Hamlをより明確にすることができます。

:javascript
  $(function() {
      var data = #{array_for_js};

      $( "#search" ).catcomplete({
        delay: 0,
        source: data
      });
  });
于 2012-12-01T14:15:44.077 に答える