什么是'数据提供程序'在Rails项目中的表单上下文中
What is a 'data-provider' in the context of a form in a Rails project?
免责声明:这是我第一个认真的业余项目。我对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数据属性的基本概述,请参阅本文
相关文章:
- 将函数的上下文应用于javascript变量
- 正在将数据主题添加到所有项目
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 如何检查管道中未定义的项目
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 学生搜索项目jquery/javascript
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- 如何获取不属于我项目的上一页的URL
- 使用JQuery的动态上下文菜单
- Dojo:访问dijit.form.Select中单击的项目
- 角度的项目列表 ng 重复,ng 单击显示全宽描述
- 我需要为我的朋友在这个项目上提供帮助
- 如何从 HTML 查询中删除项目
- 在Meteor项目中安装并包含npm模块后出错
- 如何访问UIWebView'的子窗口上下文
- 当在Ember中点击一个项目时,我如何将一个活动类添加到项目列表中
- 如何将项目添加到 Adobe Flash 上下文菜单
- 将多个项目添加到上下文菜单
- 是否有可能将上下文菜单中的项目中继到自己编写的功能
- 添加项目到上下文菜单