javascript - Rails 4 - 从当前数据定义 javascript 数组而无需重新加载网页

Question

在我的 Rails 4 应用程序中，我尝试在用户向项目添加标签之前使用 jquery validate 验证标签的唯一性。标签列表如下所示:

<div id="taglist">
  <span class="label label-default tag-container">
    <a class="item-tag" id="veritatis" href="/tags/veritatis">veritatis</a>
  </span>
  <span class="label label-default tag-container">
    <a class="item-tag" id="id" href="/tags/id">id</a>
  </span>
  <span class="label label-default tag-container">
    <a class="item-tag" id="facere" href="/tags/facere">facere</a>
  </span>
  <span class="label label-default tag-container">
    <a class="item-tag" id="boo" href="/tags/boo">boo</a>
      <span>
        <a class="remove-tag-button" data-tag-name="boo" data-remote="true" href="">×</a>
      </span>
  </span>
</div>

我的自定义验证器如下所示:

$.validator.addMethod(
    "tagUniqueness",
    function (value, element) {
      var tags_list = ;
      console.log(tags_list.indexOf(value));
      return this.optional( element ) || (tags_list.indexOf(value) == -1);
    }, "Tag already exists.");

当用户添加或删除标签时，显示标签列表的 html 会使用 ajax 与此部分进行更新。

<% item.all_tags_list.each do |t| %>
  <span class="label label-default tag-container">
    <%= link_to t, tag_path(t), class: "item-tag", id: t %>
    <% if item.tags_from(current_user).include?(t) %>
      <span>
        <%= link_to "×", '', class: "remove-tag-button", :'data-tag-name' => t, remote: true %>
      </span>
    <% end %>
  </span>
<% end %>

我需要一种在自定义验证方法中定义 tags_list 数组的方法，该数组将根据当前标签列表进行更改。

理想情况下，这可能是从模型中获得的，但我不知道这是否可能。我的下一个想法是从部分生成的 html 的属性中获取它。

由于部分是从模型生成的，所以如果我根据部分的属性定义数组，那么它似乎是同一件事。我不知道该怎么做。我希望它能以某种方式实现。

Answer 1

您可以使用数据属性...

<div id="tag-list" data-tag-list="<%= item.all_tags.map(&:name) %>">
</div>

然后，在 JavaScript 中您可以引用该数据项:

$.validator.addMethod(
    "tagUniqueness",
    function (value, element) {
      var tags = $('#tag-list').data('tag-list').split(',');
      console.log(tags);
      ...

我不知道你的元素的名称是什么，但你明白了。捕获它们应该很容易。

如果您需要在输出标签之前对其应用任何转换，则可以使用助手。