如何调用参数来自 Ruby 模型的 javascript 函数？
Posted
技术标签:
【中文标题】如何调用参数来自 Ruby 模型的 javascript 函数？【英文标题】：How to call a javascript function whose parameters are from a Ruby model? 【发布时间】：2016-03-23 21:29:02 【问题描述】：这就是我到目前为止所得到的：用户将转到一个视图并单击一个“创建事件”按钮，该按钮将在我的事件表中保存一个带有 starts_at 和 ends_at 日期的事件。
当用户点击创建事件时，该事件在事件控制器中被创建：
class EventsController < ApplicationController
before_filter :logged_in?
def new
@event = Event.new
@calendar = current_customer.calendar
end
def create
@calendar = current_customer.calendar
@event = @calendar.events.build(event_params)
if @event.save
redirect_to '/main'
else
redirect_to '/compose'
end
end
private
def event_params
params.require(:event).permit(:calendar_id, :name, :starts_at, :ends_at)
end
用户会被自动发送到他们的主页 (/main)。这是 html 日历所在的位置。 javascript 函数将在我的 application.js 文件中，而日历 html 将在我的 main.html.erb 文件中。
我想要做的是能够在创建事件时调用一个 javascript 函数，该函数将更改用户主页上的 html 日历以显示事件（只是用红色遮住日期和时间）。 javascript 函数需要接收新创建的事件的参数（starts_at、ends_at）才能工作（我认为）。
我对 ruby on rails、javascript 和 html 非常陌生，所以如果你有一个有用的答案，请像我 5 岁一样解释！！
编辑：这是我用来链接到事件控制器的创建方法的视图代码：
<div class="jumbotron">
<div class="container">
<div class="form">
<h1>Create A Meeting</h1>
<%= form_for(@event) do |f| %>
<%= f.text_field :name, :placeholder => "Title" %>
<!--< f.collection_select :location, Location.all, :id, :locName %> FOR WHEN LOCATIONS ARE A THING-->
<!--< f.text_field :body, :placeholder => "Short Description" %> NEXT STEP -->
<div>
<h2>when do you want it to start?</h2>
<%= f.datetime_select :starts_at, :placeholder => "when do you want it?" %>
</div>
<div>
<h2>when do you want it to end?</h2>
<%= f.datetime_select :ends_at, :placeholder => "when should it end?" %>
</div>
<%= f.submit "Create Meeting", class: "btn-submit" %>
<% end %>
</div>
</div>
</div>
Pages 控制器（生成 main 的地方）：
class PagesController < ApplicationController
#before_action :require_customer, only: [:main]
def home
end
def main
end
end
路由文件：
Rails.application.routes.draw do
root 'pages#home'
get '/main' => 'pages#main'
get '/signup' => 'customers#new'
resources :customers, :calendars
get '/signupbus' => 'businesses#new'
resources :businesses
get '/login' => 'sessions#new'
post 'login' => 'sessions#create'
delete 'logout' => 'sessions#destroy'
get '/compose' => 'events#new'
resources :events
这里是我每周日历视图的 html 的 sn-p（我知道这很糟糕，但我不知道如何让它变得更好）：
</div>
<div class="jumbotron">
<div class="container">
<div class="main2">
<a class="btn-main" href="/compose">Create a Meeting</a>
</div>
</div>
</div>
<div class = "calendarContainer">
<table class= "weeklyCalendar">
<tr>
<td class = "blankTopLeft">
</td>
<td class = "daytd" width=75 valign=top >
<p class=MsoNormal><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Mon</span></i></p>
<p class=MsoNormal><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>14</span></i></p>
</td>
<td class = "daytd" width=75 valign=top>
<p class=MsoNormal ><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Tue</span></i></p>
<p class=MsoNormal ><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>15</span></i></p>
</td>
<td class = "daytd" width=75 valign=top>
<p class=MsoNormal><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Wed</span></i></p>
</td>
<td class = "daytd" width=75 valign=top>
<p class=MsoNormal><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Thu</span></i></p>
</td>
<td class = "daytd" width=75 valign=top>
<p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal'><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Fri</span></i></p>
</td>
<td class = "daytd" width=75 valign=top>
<p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal'><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Sat</span></i></p>
</td>
<td class= "daytd" width=75 valign=top>
<p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal'><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Sun</span></i></p>
</td>
</tr>
<tr class = "Monday" style='height:28.05pt'>
<td class = "timetd" width=75 valign=top>
<p class=MsoNormal align=right style='margin-bottom:0cm;margin-bottom:.0001pt;
text-align:right;line-height:normal'><i><span style='font-size:13.0pt;
font-family:"Calibri Light",sans-serif'> 9:00 </span></i></p>
</td>
<td id = "mon900" class ="freeslot" width=75 valign=top>
<p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal'> </p>
</td>
<td id = "tue900" class ="freeslot" width=75 valign=top>
<p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal'> </p>
</td>
<td id = "wed900" class = "freeslot" width=75 valign=top>
<p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal'> </p>
</td>
<td id = "thu900" class = "freeslot" width=75 valign=top>
<p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal'> </p>
</td>
<td id = "fri900" class = "freeslot" width=75 valign=top>
<p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal'> </p>
</td>
<td id = "sat900" class = "freeslot" width=75 valign=top>
<p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal'> </p>
</td>
<td id = "sun900" class = "freeslot" width=75 valign=top>
<p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal'> </p>
</td>
</tr>
<tr style='height:27.75pt'>
<td class = "timetd" width=75 valign=top>
<p class=MsoNormal align=right style='margin-bottom:0cm;margin-bottom:.0001pt;
text-align:right;line-height:normal'><i><span style='font-size:13.0pt;
font-family:"Calibri Light",sans-serif'>10:00</span></i></p>
</td>
【问题讨论】：
您的意思是说，一旦您创建了应该在主 html 页面的日历中可见的事件。请确认。 @Bharatsoni 是的，这就是我的意思 我不知道你为什么需要 javascript 来做这个？如果你在数据库中存储了新事件然后重定向到主页面，主页面将被重建，包括新创建的事件？我错过了什么吗？ @BroiSatse 我的所有主页目前包含的是一个绘制的html日历，html与事件模型或日历模型之间没有任何联系。这就是我要建立的，以便在创建事件时，相应地更改 html 好的，我知道现在发生了什么。你不需要 JS。你不需要format.js。您需要做的就是在您的PagesContrller 中从您的main 方法重新加载事件。
【参考方案1】：
在使用 Controller 中现有的 create 方法创建新事件后，您重定向到 PagesController 的 main 方法，然后，您将不得不在您的 @987654325 中重新加载 event @方法。
为此，您需要知道所需event 中的id，这意味着您必须从您要重定向的任何地方传递它，这意味着您必须在您的路线中为它腾出空间对于main 方法。
所以，在你的路线上：
get '/main/:callendar_id' => 'page#main'
然后从您的 create 方法中，您使用新创建的事件的 id 重定向到此路径。
def create
@calendar = current_customer.calendar
@event = @calendar.events.build(event_params)
if @event.save
redirect_to "/main/#@callendar.id"
else
redirect_to '/compose'
end
end
并从您的PagesController 的main 方法重新加载事件：
def main
@callendar = Callendar.find(params[:callendar_id])
end
这很适合您，并在您的 main 页面上为您提供更新后的日历以及新事件。
【讨论】：
我对AJAX不是很熟悉，其实我之前没用过。我将如何使用 JS 调用创建方法/保存新事件？该事件还会出现在我的数据库中吗？ 是的。您只需将remote: true 属性添加到您当前用于创建事件的链接。我的意思是用户单击以创建事件的链接。如果您放弃此链接的代码，我可以向您展示如何操作，并帮助更新上述创建操作。
好的，非常感谢，我已将代码添加到问题的末尾
所以现在在 create.js.erb 文件中，我可以放任何我喜欢的 javascript 吗？所以因为我想改变 html 的外观，我可以在那个文件中做所有的 jquery 调用？
另外，在添加你给我的代码后，现在当我点击“创建会议”按钮时，我并没有返回到我之前的主页，这是为什么？跨度>
以上是关于如何调用参数来自 Ruby 模型的 javascript 函数？的主要内容，如果未能解决你的问题，请参考以下文章