Question

在下面的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 %>

Answer 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访问此数据。这有点尴尬，但不需要任何补充宝石。

如何在Javascript中使用ruby变量来填充选择

1 个答案: