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

【问题标题】：How to use ruby variable in Javascript to populate selectize如何在 Javascript 中使用 ruby 变量来填充 selectize
【发布时间】：2014-07-15 16:56:00
【问题描述】：

在下面的 Rails 视图中，我使用 javascript 'selectize' 来显示选择列表。我不知道如何用我的@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 %>

【问题讨论】：

标签： javascript ruby-on-rails ruby-on-rails-4 selectize.js

【解决方案1】：

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 来访问这些数据。有点别扭，但不需要任何补充宝石。

【讨论】：