如何在Javascript中使用ruby变量填充selectize
How to use ruby variable in Javascript to populate selectize
在下面的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访问这些数据。这有点尴尬,但不需要任何补充的宝石。
相关文章:
- 将javascript变量分配给ruby变量
- 如何在 erb 模板中递增 Ruby 变量
- jquery显示/隐藏块中的Ruby变量
- 在事件触发后使用 ruby 变量
- 在 htnl.erb 文件中将 ruby 变量添加到 javascript
- 在 Java 脚本 if-else 块中设置 Ruby 变量
- 在 JavaScript 中获取一个 Ruby 变量
- 在 Javascript 中访问 Ruby 变量
- 将Ruby变量传递给javascript进行post
- Javascript”;if语句“;和嵌入式ruby(ruby变量始终为true)
- 在Script标记中使用Ruby变量
- 将ruby变量传递给javascript(RubyonRails)
- 如何从Javascript事件更新ruby变量
- 将存储在Ruby变量中的HTML块存储在JavaScriptvar中
- 更改javascript中的ruby变量
- 如何在Javascript中使用ruby变量填充selectize
- Rails 3和jQuery-如何将ruby变量传输到javascript
- 将javascript变量转换为ruby变量
- 如何使用AJAX请求将javascript变量分配给ruby变量
- Ajax js语法与ruby变量