javascript - 如何将 javascript 变量设置为 Rails 模型中的列表?

标签 javascript ruby-on-rails jquery-ui

我有一个 Rails 应用程序,其中有一个 Post 模型,我使用 acts_as_taggable_on gem 来实现标记功能。我正在研究自动完成标签建议,并希望将一个 javascript 变量设置到我的 Post 模型中的列表。我正在使用 jquery-ui autocomplete 来实现自动完成功能。

这是我的 _form.html.erb,其中有一个表单字段接受特定帖子的 tags

<%= form_for Post.new do |f| %>


<div class="form-group">
    <%= f.label :message, "Post Your Thoughts:", class: "col-md-4 control-label message-label" %>

      <%= f.text_area :message, class: "form-control" , rows: "7" %>

  </div>

  <div class="form-group">
    <%= f.label :tag_list, "Tags:", class: "col-md-4 control-label message-label" %>

      <%= f.text_field :tag_list, class: "form-control", placeholder: "Enter tags separated by Comma"  %>


  </div>

  <%= f.submit "Submit Post" , class: "btn btn-info" %>
<!-- Ajax for autocomplete -->
<script>
  $(function() {

   var availableTags = "...Here want a JSON list of the tags present in database..."

$( "#post_tag_list" ).autocomplete({
    alert("availableTags");
  source: availableTags
});
});

现在如何将所有标签的列表放入 javascript 的 var availableTags 中?

更新 1

现在我正在做的是我有一个辅助方法 get_autocomplete_tag_list 进一步调用 Post 模型的方法,返回 tags 列表。 现在正如@Prakash 建议我使用

 var availableTags = <%= raw get_autocomplete_tag_list.to_json %>;

使用从服务器获取标签列表。

现在我的问题是,考虑到到目前为止,我在使用 Ajax 和获取标签列表时遇到了麻烦,这种获取标签列表的方法是否存在任何问题。

最佳答案

在这种情况下,我建议使用更干净的解决方案。如果您的标签达到几千个条目,它总是会加载到您的 html 结果中,我发现这在性能和带宽方面是一个糟糕的解决方案(即使这显然是可缓存的,也不使用缓存)。您应该通过 AJAX 加载它,或者使用提供 Rails 和 JS 之间交换的 gem,例如 Gon:https://github.com/gazay/gon

例如,您可以这样使用 Gon:

在你的 Controller 中:

gon.available_tags = tags

在您的 jQuery UI 脚本中:

var availableTags = gon.available_tags

为此还有一个 RailsCast:http://railscasts.com/episodes/324-passing-data-to-javascript

关于javascript - 如何将 javascript 变量设置为 Rails 模型中的列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32537764/

相关文章:

具有网格和包含的 jQuery UI Draggable 具有奇怪的偏移量

javascript - 从对象数组动态创建嵌套的 json

javascript - 删除 afterLabelTextTpl 中的字段触发事件单击

ruby-on-rails - Rails 4 参数;如何将参数列入一组值的白名单

ruby-on-rails - 部署到Heroku时出现ActionView错误,在本地可以正常运行

javascript - 无法使用 jquery 修改最后一个 <li> ?

jquery - 在动态添加的元素上调用 jquery 方法

javascript - 显示可拖动 div 悬停的标签内容

javascript - 如何在 ng-click 上堆叠多个操作/功能?

sql - rails : setting column alias attribute with find_by_sql