引导表单如何绑定到Rails模型？

Question

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

我有一个带有使用“ bootstrap-form” gem以及推荐的datepicker gem的表单的Rails应用程序。 我已经在application.scss和application.js中包含了正确的文件（请参见下文）以及一个用于查看事件的View js文件，并且生成的html看起来还不错。 但是，对我来说，这并没有发生。 我希望能够理解它们如何正确地挂在一起，以便自己进行调试，因此我得出了我认为我不理解的基本知识-Rails如何将数据绑定到html表单？

我的代码-

宝石文件

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

application.scss

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

application.js

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

projects / _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

以下内容看起来不太好

projects / _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的合适格式来设置时间。

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