Question

我正在使用jQuery Autocomplete类别，我已经使用了正常运行的演示代码，现在我正在尝试使用数据库中的数据填充下拉列表。我在我的视图中使用了这段代码：

: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？还有另一种方法吗？我在视图中的所有内容都是一个名为search的文本字段，它与演示代码一起使用。

Answer 1

:javascript这样的过滤器中的代码不被视为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创建一个新数组，然后使用+将两个数组添加到一起，最后使用{{1}将它们组合成一个插入页面的单个字符串。

然而，这是一个非常难看和笨拙的代码。在这种情况下，更好的解决方案是将创建数组的代码提取到帮助程序中，并从Haml中调用帮助程序。

助手：

join(',')

然后你的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

使用数据库中的数据填充jquery自动完成

1 个答案: