html - 使用咖啡脚本计算模态
问题描述
我正在尝试使用户可以输入 3 个数字,当他们单击提交按钮时,他们将看到一个模态,其中包含模态中这 3 个数字的计算。我不确定如何做到这一点。我的控制器中有计算。
class WelcomeController < ApplicationController
def how_much
@price = (params[:amount])
@mortgage = (params[:high_rent])
@rent = (params[:current_rent])
if @price && @mortgage && @rent.present?
@monthly_savings = @mortgage - @rent
@savings_goal = @price*0.03
@months_to_buy = (@savings_goal/@monthly_savings).to_i
@total_savings = @monthly_savings * @months_to_buy
else
@months_to_buy = 24
@total_savings = "great savings"
end
respond_to do |format|
format.json { render json: {:months_to_buy => @months_to_buy, :total_savings => @total_savings}}
end
end
end
我的表格如下...
<%= form_tag( '/welcome/how_much', post: true, remote: true) do %>
<h5 class="label">Estimated new home cost?</h5>
<%= text_field_tag 'price', nil, placeholder: 'ex. 100,000', class: "form-control form-control-lg" %>
<h5 class="label">Estimated payment for a new home?</h5>
<%= text_field_tag 'mortgage', nil, placeholder: 'ex. 1,200', class: "form-control form-control-lg" %>
<h5 class="label">Current Monthly Rent?</h5>
<%= text_field_tag 'rent', nil, placeholder: 'ex. 800', class: "form-control form-control-lg" %>
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#savingsModal">
See how we help
</button>
<!-- Modal for sign-up -->
<div class="modal" id="savings_modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<h3 class="modal-title" id="savingsModalTitle">You could be ready to buy in <%= @months_to_buy %> months</h3>
<h5 class="modal-title">and have <%= @total_savings %>* to put towards a down payment & ...</h5>
<div class="modal-body">
<h4>Sign-up Now to get started!</h4>
</div>
</div>
</div>
</div>
<% end %>
最后,这是我拥有的 CoffeeScript。它也有计算,但我不确定是否应该在 CoffeeScript 或控制器中进行计算。我不知道我是否做对了,或者我完全不在基地,请帮忙!!!!
# Calculate Savings jQuery
price = document.getElementsByName('house_amount')[0].value
mortgage = document.getElementsByName('high_rent')[0].value
rent = document.getElementsByName('current_rent')[0].value
MonthlySavings: (mortgage, rent) ->
if mortgage? && rent?
parseFloat(mortgage) - parseFloat(rent)
SavingsGoal: (price) ->
if price?
parseFloat(price) * 0.03
MonthsToBuy: (Savings_goal,MonthlySavings) ->
if SavingsGoal? && MonthlySavings?
parseFloat(SavingsGoal)/parseFloat(MonthlySavings)
TotalSavings: (MonthlySavings,MonthsToBuy) ->
if MonthlySavings? && MonthsToBuy?
parseFloat(MonthlySavings) * parseFloat(MonthsToBuy)
解决方案
class Calculation
constructor (@price, @mortgage, @rent) ->
monthly_savings -> @mortgage - @rent
savings_goal -> @price * 0.03
months -> Math.ceil @savings_goal / @monthly_savings
savings -> monthly_savings * months
并创建计算实例:
price = document.getElementsByName('house_amount')[0].value
mortgage = document.getElementsByName('high_rent')[0].value
rent = document.getElementsByName('current_rent')[0].value
instance = new Calculation(price, mortgage, rent)
然后在某处显示它:
document.getElementById('total_savings').value = instance.savings();
推荐阅读
- operator-sdk - 无法使用“go.kubebuilder.io/v3”创建 API
- bash - 如何根据日期线将 .rtf 文件拆分为多个文件?
- python - 如何在 HoloViews 图上添加关于节点的可变数量的自定义悬停字段?(python 和散景后端)
- ios - IOS vs OSX BLE:实例化 CBCentralManager - 为 iOS 编码
- javascript - 我正在尝试循环复选框和收音机,但我无法弄清楚?
- c# - Entity Framework Core 和 ASP.NET Core MVC 中的继承数据库
- sql - 连接表时重复查询结果
- javascript - 如何比较数组中的日期
- python - 如何用moviepy连接视频和图片
- kendo-ui - 如何按行 Kendo UI Grid 从 dataSource 获取值 id