我已经彻底搜索过，但找不到答案。
我正在使用 padrino 编写一个小应用程序，我有 2 个视图，人物和事件。我有这些视图和控制器，它们工作正常。
我的问题是从“事件”视图中，我想打开一个模式窗口来添加一个新人。
模式窗口将加载“人”的相关字段。填写完字段并单击按钮后，模式窗口将消失，新的“人员”将被保存，用户将返回事件页面。
谁能给我建议如何进行？谢谢你。
【问题讨论】：
标签： javascript sinatra partials padrino
模态窗口通常使用 javascript 完成。例如，使用jQuery UI（来自the docs）
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
Sinatra/Padrino 将负责布局和视图，您只需添加脚本部分。假设您使用Haml，您的视图将如下所示：
#dialog{title: "Basic dialog"}
%p
This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
:javascript
$(function() {
$( "#dialog" ).dialog();
});
javascript 不需要像 jQuery 文档建议的那样进入 head 标记。
编辑：
将部分加载到窗口中有多种选择。一种是使用像 Handlebars 这样的 javascript 库，但我更喜欢让 javascript 从路由中加载它，这样所有视图代码都保持在一起，例如
get "/templates/modal1/?" do
haml :modal1, :layout => !xhr?
end
在 javascript 中，make an AJAX call 到该路由，您将只获得 HTML sans 布局，然后将其用于fill the box：
$.get('ajax/test.html', function(data) {
$('#dialog').html(data);
}
在您看来，只需描述 div：
#dialog1
-# The HTML from the view will be put here by the jQuery code.
类似的东西。
【讨论】：