使用 page.js 和 sinatra(或 rails)
using page.js with sinatra (or rails)
我想知道是否可以将 page.js 与 sinatra 一起使用。我的 images
的路由被 Sinatra 拦截,而不是 Page.js
get '/' do
erb :index
end
__END__
@@ layout
<!DOCTYPE html>
<html lang="en">
<head>
<title>page.js</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="page.js"></script>
<style type="text/css">ul li { display: inline; list-style:none }</style>
</head>
<body>
<%= yield %>
</body>
<script type="text/javascript">
page('/images', function(ctx){
console.log('page(' + ctx.path + ')');
$('section#example').html('<h2 class="text-center">Listing of Images</h2>');
});
/*... /videos ..*/
page('*', function(ctx){
console.log('page(' + ctx.path + ')');
$('section#example').html('<h2 class="text-center">Error : ' + ctx.path + '</h2>');
});
$('document').ready(function(){page()});
</script>
</html>
@@ index
<ul>
<li><a href="./">index</a></li>
<li><a href="./videos">videos</a></li>
<li><a href="./images">images</a></li>
</ul>
<section id="example" class="well"></section>
<h1>hello world</h1>
我认为问题只是您本地 page.js
文件的位置。 Sinatra 希望在名为 public
的目录中找到静态资产(否则该路径被假定为已定义的路由)。因此,只需创建目录并将 page.js
文件移到其中(但保持脚本 src 不变)。如果你想更改 Sinatra 提供静态资源的目录,你可以这样做:
set :public_folder, Proc.new { File.join(root, "my_directory_with_assets") }
我认为你也缺少 jQuery
所以从他们的 CDN 添加它。
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
我想知道是否可以将 page.js 与 sinatra 一起使用。我的 images
的路由被 Sinatra 拦截,而不是 Page.js
get '/' do
erb :index
end
__END__
@@ layout
<!DOCTYPE html>
<html lang="en">
<head>
<title>page.js</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="page.js"></script>
<style type="text/css">ul li { display: inline; list-style:none }</style>
</head>
<body>
<%= yield %>
</body>
<script type="text/javascript">
page('/images', function(ctx){
console.log('page(' + ctx.path + ')');
$('section#example').html('<h2 class="text-center">Listing of Images</h2>');
});
/*... /videos ..*/
page('*', function(ctx){
console.log('page(' + ctx.path + ')');
$('section#example').html('<h2 class="text-center">Error : ' + ctx.path + '</h2>');
});
$('document').ready(function(){page()});
</script>
</html>
@@ index
<ul>
<li><a href="./">index</a></li>
<li><a href="./videos">videos</a></li>
<li><a href="./images">images</a></li>
</ul>
<section id="example" class="well"></section>
<h1>hello world</h1>
我认为问题只是您本地 page.js
文件的位置。 Sinatra 希望在名为 public
的目录中找到静态资产(否则该路径被假定为已定义的路由)。因此,只需创建目录并将 page.js
文件移到其中(但保持脚本 src 不变)。如果你想更改 Sinatra 提供静态资源的目录,你可以这样做:
set :public_folder, Proc.new { File.join(root, "my_directory_with_assets") }
我认为你也缺少 jQuery
所以从他们的 CDN 添加它。
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>