在 application_helper 中创建自定义单选按钮助手 [英] Creating custom radio button helper in application_helper

问题描述

我想通过 Bootstrap 创建自定义单选按钮.我做到了，但我想在 application_helper 中添加这个控件.

我目前的解决方案

<% @engines2.each 做 |e|％＞<button type="button" class="btn <%= @car.engine_id == "#{e.id}".to_i ? 'active' : '' %>"data-toggle="button" onclick="javascript:document.getElementById('car_input_engine_id').value='<%="#{e.id}" %>'"><%= "#{e.name}" %><%结束%><input type="hidden" id="car_input_engine_id" name="car[input_engine_id]" value="<%= @car.engine_id %>"/>

预期用途

<%= form_for @car, :method =>发布"做 |f|％＞<%= checkbox_bootstrap_tag(@engines2, @car.engine_id) %><%= f.submit "Test Post", :class =>btn btn-逆"%><%结束%>

帮手

 def checkbox_bootstrap_tag(engines, car_engine_id)content_tag :div, :class=>"btn-group", "data-toggle"=>"buttons-radio" 做engine.each 做 |e|content_tag :button, :type =>:按钮，:class=>'btn #{car_engine_id == #{e.id}.to_i ?积极的" : ""}'，数据切换"=>按钮"，:onclick=>"javascript:document.getElementById('car_input_engine_id').value=#{e.id}" 做姓名结尾结尾content_tag :input, :type =>:hidden, :id=>"car_input_engine_id", :name=>"car[input_engine_id]", :value=>car_engine_id结尾结尾

但它不起作用.有什么想法吗?

解决方案

看看这个片段:

engines.each 做 |e|...结尾

它执行了一些东西，但它的结果正在消失，因为它后面还有一行:

content_tag :input, :type =>:hidden, :id=>"car_input_engine_id", :name=>"car[input_engine_id]", :value=>car_engine_id

所以你必须连接两个结果:engines.each ... 和这一行的结果.

而且我认为您打算制作 engines.map 而不是 engines.each:以获得一组 button-tags.

那么你必须修复这一行:

:class=>'btn #{car_engine_id == #{e.id}.to_i ?积极的" : ""}'，

您正在尝试执行插值 (#{..})，但您将其包裹在单引号 '..' 中.您可以使用 %[ ... ] (其中 [ 是偏好问题，您可以使用 %{...} 或其他括号，如果你想)如果你有一个混合单/双引号的字符串.

还有 content_tag 用于 input 也不合适.input 标签必须有什么内容?对了，一点内容都没有！因此，请改用简单的 tag 助手.

所以，这是我得到的:

def checkbox_bootstrap_tag(engines, car_engine_id)content_tag :div, :class=>"btn-group", "data-toggle"=>"buttons-radio" 做engine_html =engine.map 做 |e|内容标签:按钮，:类型 =>:按钮，:class=>%[btn #{car_engine_id == e.id ?积极的" : ""}]，:数据=>{:toggle =>按钮"}，:onclick=>"javascript:document.getElementById('car_input_engine_id').value=#{e.id}" 做姓名结尾结尾safe_join(engines_html) +tag(:input, :type =>:hidden, :id=>"car_input_engine_id", :name=>"car[input_engine_id]", :value=>car_engine_id)结尾结尾

注意 safe_join 的用法:这个助手对于合并数组元素和 HTML 标记很有用(在输出之前不要对它们进行转义).

还有 :data =>{:toggle =>"button"}, 部分必须告诉你 Rails 助手知道这个属性.

I want to create custom radiobuttons via Bootstrap. I did it, but I want to add this control in application_helper.

My current solution

<div class="btn-group" data-toggle="buttons-radio">
      <% @engines2.each do |e| %>
        <button type="button" class="btn <%= @car.engine_id == "#{e.id}".to_i ? 'active' : '' %>" data-toggle="button" onclick="javascript:document.getElementById('car_input_engine_id').value='<%= "#{e.id}" %>'">
            <%= "#{e.name}" %>
        </button>
      <% end %>
      <input type="hidden" id="car_input_engine_id" name="car[input_engine_id]" value="<%= @car.engine_id %>" />
 </div>

Desired use

<%= form_for @car, :method => "post" do |f| %>
  <%= checkbox_bootstrap_tag(@engines2, @car.engine_id) %>
    <%= f.submit "Test Post", :class => "btn btn-inverse" %>
<% end %>

Helper

 def checkbox_bootstrap_tag(engines, car_engine_id)   
    content_tag :div, :class=>"btn-group", "data-toggle"=>"buttons-radio" do
      engines.each do |e|
        content_tag :button, :type => :button,
        :class=>'btn #{car_engine_id == #{e.id}.to_i ? "active" : ""}',
        "data-toggle"=>"button", 
        :onclick=>"javascript:document.getElementById('car_input_engine_id').value=#{e.id}" do
           e.name       
        end
      end
      content_tag :input, :type => :hidden, :id=>"car_input_engine_id", :name=>"car[input_engine_id]", :value=>car_engine_id
    end
  end

But it doesn't work. Any ideas?

解决方案

Take a look at this fragment:

  engines.each do |e|
    ...
  end

It preforms something, but its result is going away, as there's one more line after it:

content_tag :input, :type => :hidden, :id=>"car_input_engine_id", :name=>"car[input_engine_id]", :value=>car_engine_id

So you have to concatenate both results: of engines.each ... and this line's result.

And I think you were planing to make engines.map instead engines.each: to get an array of button-tags.

Then you have to fix this line:

:class=>'btn #{car_engine_id == #{e.id}.to_i ? "active" : ""}',

You're trying to perform interpolation (#{..}) but you wrapped it in single quotes '..'. You can use %[ ... ] (where [ is a matter of preferences, you can use %{...} or other brackets if you want) if you have a string with mixed single/double quotes.

Also content_tag for input isn't suitable. What content the input tag has to have? Right, no content at all! So use simple tag helper instead.

So, here's what I got:

def checkbox_bootstrap_tag(engines, car_engine_id)   
  content_tag :div, :class=>"btn-group", "data-toggle"=>"buttons-radio" do
    engines_html = engines.map do |e|
        content_tag :button, 
          :type => :button,
          :class=> %[btn #{car_engine_id == e.id ? "active" : ""}], 
          :data => {:toggle => "button"},
          :onclick=> "javascript:document.getElementById('car_input_engine_id').value=#{e.id}" do
            e.name       
        end
      end
    safe_join(engines_html) +
      tag(:input, :type => :hidden, :id=>"car_input_engine_id", :name=>"car[input_engine_id]", :value=>car_engine_id)
  end
 end

Note the usage of safe_join: this helper is useful for merging array elements with HTML markup (to not escape them before output).

Also :data => {:toggle => "button"}, part must tell you that Rails helpers are aware of this attribute.

这篇关于在 application_helper 中创建自定义单选按钮助手的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！