bootstrap 表单如何绑定到 rails 模型？

Question

引导表单和 Rails 模型之间的数据如何绑定？

我有一个带有“bootstrap-form” gem 的表单的 rails 应用程序，以及推荐的 datepicker gem。我在 application.scss 和 application.js 中包含了正确的文件（见下文）和一个查看 js 文件来获取事件，我生成的 html 看起来还不错。但在某个地方它并没有发生在我身上。我希望能够理解它是如何正确地挂在一起的，所以我可以自己调试它，所以我来到了我认为我不理解的基本部分——rails 如何将数据绑定到 html 表单？

我的代码 -

宝石文件.rb

gem 'bootstrap_form'
gem 'momentjs-rails'
gem 'bootstrap3-datetimepicker-rails'

应用程序.scss

 @import "bootstrap-sprockets";
 @import "bootstrap";
 @import 'bootstrap-datetimepicker';

应用程序.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require_tree .

项目/_form.html.erb

<%= bootstrap_form_for(@project) do |f| %>

...

  <div class="field">
    <%= f.text_field :target, id: 'project_target' %>
    <script type="text/javascript">
      $(function () {
          $('#project_target').datetimepicker({
              inline: true,
              sideBySide: true
              });
      });
    </script>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

... 这会生成以下 html -

<div class="field">
<div class="form-group"><label class="control-label" for="project_target">Target</label><input id="project_target" class="form-control" type="text" name="project[target]" /></div>
<script type="text/javascript">
    $(function () {
        $('#project_target').datetimepicker({
            inline: true,
            sideBySide: true
        });
    });
</script>

...看起来不错，但日期没有存储到数据库中。

提交按钮将页面返回到服务器，并将数据附加到name 标记，我的理解是否正确？

当表单返回到服务器时，我可以看到 target 包含在参数中，但它不是插入的一部分 - 我怀疑这是由于 Rails 中日期时间的格式化方式而不是到 Jquery，但我不确定这是不是真的。

Started POST "/projects" for ::1 at 2015-12-09 00:01:02 +0000
Processing by ProjectsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"9Mewj5CDmQoDycjdJgpazYdXqqZBHYB6CC2gnJOtizZGqUUcJr9gEwfOOR9Pb/ndSWCq7b1zVihGN+EmVJbA0g==", "project"=>{"name"=>"RC1", "stream_id"=>"1", "target"=>"12/24/2015 12:00 AM"}, "commit"=>"Create Project"}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]
   (0.1ms)  BEGIN
  SQL (0.4ms)  INSERT INTO "projects" ("name", "stream_id", "user_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["name", "RC1"], ["stream_id", 1], ["user_id", 1], ["created_at", "2015-12-09 00:01:02.569495"], ["updated_at", "2015-12-09 00:01:02.569495"]]
   (1.0ms)  COMMIT
Redirected to http://localhost:3000/whatisnext?object_id=1&object_type=project
Completed 302 Found in 7ms (ActiveRecord: 1.7ms)

Answer 1

下面的位看起来不太好

项目/_form.html.js

    $('#project_target').datetimepicker();

你可以把它留在 html 中或放入

app/assets/javascripts/new-file.js

    <div class="field">
      <%= f.text_field :target, id: 'project_target' %>
      <script type="text/javascript">
        $(function () {
          $('#project_target').datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            inline: true,
            sideBySide: true
           });
         });
      </script>

“格式：”属性确保时间以适合 ActiveRecord 的格式过去。

是的，您对第二个问题是正确的。