引導表單如何綁定到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的合適格式來設置時間。

是的，您對第二個問題是正確的。