用数据库中的数据填充jquery自动填充

我正在使用jQuery Autocomplete与类别，我已经使用了可以正常工作的演示代码，现在我正尝试使用我的数据库中的数据填充下拉列表。我用这个代码，我的观点中：用数据库中的数据填充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？有没有另外一种方法呢？我所看到的只是一个名为search的文本字段，它可以与演示代码一起使用。

来源

2012-11-30 user1738017

哪些文件是你在编写这些代码可以请你展示完整的代码，在范围内 – Ross

这一点。在它所指的窗体的haml视图中！ – user1738017

我想你更新了演示代码的问题，请显示你正在尝试的代码，以便人们可以帮助 – Ross

过滤器内部的代码（如: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创建一个新的数组，然后使用+将两个数组添加到一起，最后使用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

然后你Haml的可能是更加清晰：

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

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

来源

2012-12-01 14:15:44 matt

用数据库中的数据填充jquery自动填充

回答

相关问题