什么是'数据提供程序'在Rails项目中的表单上下文中

What is a 'data-provider' in the context of a form in a Rails project?

本文关键字:项目 上下文 表单 Rails 数据 什么 程序      更新时间:2023-09-26

免责声明:这是我第一个认真的业余项目。我对rails和编程是一个新手,但我正在努力学习。

我试图实现一个所见即所得的文本编辑器到我的一个窗体上我的rails项目。允许用户创建具有"body"text_area字段的"event"对象。现在,描述表单忽略了所有用户格式,我想修复这个问题。我正在尝试实现Summernote,但运气不太好。我正在使用Summernote-rails gem,但是文档的这一部分给我带来了麻烦:

"如果您不使用simple_form,那么只需自己在输入字段中添加data-provider="summernote"即可。"

这个问题我已经研究了很久了,但是我还是不明白。什么是"数据提供者",如何正确地实现它?我的困惑源于我以前从未见过这个"数据提供者"。它是HTML表单属性吗?它与引导有关吗?感谢任何能为我澄清这一点的人!
<div class="container">
<div class="col-md-8 col-md-offset-2">
    <div class="well">
    <div class="form-area">
        <h3>Create an Event</h3>
        <%= form_for @event, html: { multipart: true } do |f| %>
            <div class="form-group">
                <%= f.label :image %>
                <%= f.file_field :image %>
            </div>
            <div class="form-group">
                <%= f.label :title, "Title of the event" %>
                <%= f.text_area :title, rows: 1, class: "form-control" %>
            </div>
            <div class="form-group">
                <%= f.label :date %>
                <%= f.text_field :date, class: "form-control" %>
            </div>
            <div class="form-group">
                <%= f.label :time, "Start Time" %>
                <%= f.text_field :time, class: "form-control" %>
            <br>
            <div class="form-group">
                <%= f.label :body, "Include all the details about your event here." %>
                <%= f.text_area :body, rows: 10, class: "form-control" %>
            </div>
            <div class="form-group">
                <%= f.label :category_id %>
                <%= f.select(:category_id, Category.all.map{ |f| [f.name, f.id] }, {}, { class: "form-control", id: "select" }) %>
            </div>
            <%= f.submit class: "btn btn-primary" %>
        <% end %>
    </div>
</div>

我想在这部分代码中添加Summernote:

<div class="form-group">
                <%= f.label :body, "Include all the details about your event here." %>
                <%= f.text_area :body, rows: 10, class: "form-control" %>
</div>

我遵循了Summernote-rails gem的说明,我的application.js看起来像这样

//= require jquery
//= require jquery_ujs
//= require google_analytics
//= require jquery.turbolinks
//= require pickadate/picker 
//= require pickadate/picker.date 
//= require pickadate/picker.time 
//= require bootstrap-sprockets
//= require bootstrap
//= require summernote
//= require turbolinks
//= require_tree .

$('[data-provider="summernote"]').each(function(){
  $(this).summernote({ });
})

您是正确的,data-provider是一个HTML属性(尽管它与Bootstrap无关)。HTML5引入了以"data-"为前缀的属性,作为存储与元素相关的数据的约定,否则这些数据在以前的版本中会被降级为类名。此外,根据指令在application.js中编写的一小部分JavaScript实际上是一个选择器,用于设置具有该特定属性的所有对象(使用自定义方法)。您实际上所做的只是使用更高级(或至少更专门定制)的Class或Id来进行选择。

有关HTML5数据属性的基本概述,请参阅本文