【问题标题】:Adding html data attribute to simple_forms input将 html 数据属性添加到 simple_forms 输入
【发布时间】:2015-12-17 00:45:07
【问题描述】:

我正在尝试实现一个 javascript 插件,该插件需要我将数据属性:data-region-id 添加到选择输入中。我尝试这样做(您要查找的输入是:country,倒数第三个):

<div id="capdiv">
    <h1>People#edit</h1>
    <p>Find me in app/views/people/edit.html.erb</p>
    <%=  simple_form_for @person, url: url_for(action:'update', controller:'people'), update: { success: "response", failure: "error"} do |f| %>
        <div class="clearfix entity-add nested-fields person">
            <div class="dynamic-container">
                <div class="symegrid">
                    <div class="form-inline">
                        <%= f.input :fname, input_html: {class: 'fname form-input form-control fifty'}, label: "First Name" %>
                        <%= f.input :lname, input_html: {class: 'lname form-input form-control fifty'}, label: "Last Name" %>
                    </div>
                    <div class="form-inline">
                        <%= f.input :email, as: :email, input_html: {class: 'email form-input form-control'}, label: "Email" %>
                        <%= f.input :telephone, input_html: {class: 'telephone form-input form-control'}, label: "Telephone" %>
                    </div>
                    <div class="form-inline">
                        <%= f.input :street, input_html: {class: 'street form-input form-control'}, label: "Street" %>
                        <%= f.input :city, input_html: {class: 'city form-input form-control'}, label: "City" %>
                    </div>
                    <div class="form-inline"><%= f.input :country, as: :select, input_html: {data-region-id: "person_state", class: 'country form_control crs-country'}, label: "Country" %></div>
                    <div class="form-inline">
                        <%= f.input :state, as: :select, input_html: { id: "person_state", class: 'state form-control' }, label: "State/Province" %>
                        <%= f.input :zip, input_html: {class: 'zip form-input form-control'}, label: "Zip" %>
                    </div>
                </div>
            </div>
        </div>
    <% end %>
</div>     

但是,当我尝试加载页面时,我收到以下错误消息:

SyntaxError (/home/sam/Dropbox/railsproject/legal/app/views/people/edit.html.erb:20: syntax error, unexpected tLABEL
...t, input_html: {data-region-id: "person_state", class: 'coun...
...                               ^
/home/sam/Dropbox/railsproject/legal/app/views/people/edit.html.erb:20: syntax error, unexpected ',', expecting ')'
...data-region-id: "person_state", class: 'country form_control...
...                               ^
/home/sam/Dropbox/railsproject/legal/app/views/people/edit.html.erb:20: syntax error, unexpected '}', expecting ')'
...ntry form_control crs-country'}, label: "Country" );@output_...
...                               ^):
  app/views/people/edit.html.erb:20: syntax error, unexpected tLABEL
  app/views/people/edit.html.erb:20: syntax error, unexpected ',', expecting ')'
  app/views/people/edit.html.erb:20: syntax error, unexpected '}', expecting ')'

我应该如何添加这个属性?我在想,在最坏的情况下,我可以在页面加载后使用一些 javascript 强制它,但这似乎没有必要。

提前致谢。

【问题讨论】:

    标签: javascript html ruby-on-rails ruby-on-rails-4 simple-form


    【解决方案1】:

    问题是您不能在 Ruby 中将 data-region-id 声明为符号,破折号是无效字符。你可以符号化一个字符串,像这样:

    "data-region-id" =&gt; "person_state"

    我相信创建自定义数据属性的“Rails 方式”是嵌套它,如下所示:

    data: {region_id: "person_state" } # Rails 会将下划线转换为破折号

    【讨论】:

    • 一直以来我都没有将data 放在input_html 中,所以很多文章使它看起来data 可能是一个顶级属性(当然是其他助手,但是继承和魔法太疯狂了!)。我船上的其他人,这就是它需要的样子:&lt;=% f.input :fname, label: 'First Name', input_html: { data: { action: 'controller-name#methodName' } } %&gt; 。这是为了获得一个与 Stimulus JS /phew 一起使用的复选框。
    猜你喜欢
    • 2016-05-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-29
    • 2018-06-23
    • 1970-01-01
    • 2021-08-29
    • 1970-01-01
    相关资源
    最近更新 更多