如何在Javascript中使用ruby变量填充selectize

How to use ruby variable in Javascript to populate selectize

本文关键字:ruby 变量 填充 selectize Javascript      更新时间:2023-09-26

在下面的Rails视图中,我使用javascript 'select '来显示一个选择列表。我不知道如何填充列表与我的@contacts选择…

我需要循环遍历我的@contacts并将它们添加到框中。

  <%= f.input :to, input_html: {class: 'select-to'} %> 
  <%= content_for :page_javascript do %>
  <script type="text/javascript">
  var REGEX_EMAIL = '([a-z0-9!#$%&''*+/=?^_`{|}~-]+(?:'.[a-z0-9!#$%&''*+/=?^_`{|}~-]+)*@' +
                    '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?'.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';
  var formatName = function(item) {
      return $.trim((item.first_name || '') + ' ' + (item.last_name || ''));
  };
  $('.select-to').selectize({
      persist: false,
      maxItems: null,
      valueField: 'email',
      labelField: 'name',
      searchField: ['first_name', 'last_name', 'email'],
      sortField: [
          {field: 'first_name', direction: 'asc'},
          {field: 'last_name', direction: 'asc'}
      ],
      options: [
          {email: 'nikola@tesla.com', first_name: 'Nikola', last_name: 'Tesla'},
          {email: 'brian@thirdroute.com', first_name: 'Brian', last_name: 'Reavis'},
          {email: 'someone@gmail.com'}

          // <%= @contacts %>
      ],
      render: {
          item: function(item, escape) {
              var name = formatName(item);
              return '<div>' +
                  (name ? '<span class="name">' + escape(name) + '</span>' : '') +
                  (item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
              '</div>';
          },
          option: function(item, escape) {
              var name = formatName(item);
              var label = name || item.email;
              var caption = name ? item.email : null;
              return '<div>' +
                  '<span class="label">' + escape(label) + '</span>' +
                  (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
              '</div>';
          }
      },
      create: function(input) {
          if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
              return {email: input};
          }
          var match = input.match(new RegExp('^([^<]*)'<' + REGEX_EMAIL + ''>$', 'i'));
          if (match) {
              var name       = $.trim(match[1]);
              var pos_space  = name.indexOf(' ');
              var first_name = name.substring(0, pos_space);
              var last_name  = name.substring(pos_space + 1);
              return {
                  email: match[2],
                  first_name: first_name,
                  last_name: last_name
              };
          }
          alert('Invalid email address.');
          return false;
      }
  }); 

  </script>

<% end %>

Ruby和Javascript之间很难沟通。

Ruby Racer gem允许你在Javascript中调用Ruby对象,反之亦然。https://rubygems.org/gems/therubyracer

或者,您可以使用html中的数据属性与Javascript对话。

例如,在ERb中:

<div id = 'contacts' style = 'display:none'>
<% @contacts.each do |contact| %>
<span id = "contact-<%= contact.id %>" 
    data-name = "<%= contact.name %>" data-email = "<%= contact.email  %>"></span>
<% end %>
</div>

然后使用javascript访问这些数据。这有点尴尬,但不需要任何补充的宝石。