js method, but the usage of the css is simiar and there are also js_for and css_for that take arrays (I haven't tested these, so you might not want to take my word for it).Here's our start.rb
# start.rb
#
# This is the main program for the example. It loads the controller and model,
# and then starts up Ramaze.
#
require 'rubygems'
require 'ramaze'
class MainController < Ramaze::Controller
# Use page.xhtml in the layout directory for layout
layout :page
# Add the xhtml helper so that we can use the js() method in our views.
helper(:xhtml)
# You can access it now with http://localhost:7000/
def index
# We'll set the page_javascript to be public/js/index.js
@page_javascript = "index"
@title = "Using the js method"
end
# You can access it now with http://localhost:7000/page1.
def page1
# We'll set the page_javascript to be public/js/page1.js
@page_javascript = "page1"
@title = "Using the js method - Page 1"
end
end
Ramaze.startThere's mostly just our normal things in there, setting the layout and a couple of methods. The one unusual, actually just new, is the
helper(:xhtml). What this will do is allow us to use the js method in our views to create a JavaScript simply. The two methods, index and page1 really don't do anything except set the @title and the @page_javascript variables. These will get picked up and used in our page.xhtml layout. Here's the code for that:<!-- view/index.xhtml -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Our jQuery is in the public/js directory -->
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<!-- Use the js method from the xhtml helper to add the javascript for this page -->
#{ js @page_javascript }
<title>#@title</title>
</head>
<body>
#@content
</body>
</html>Once again, this is quite simple. We do have a
script tag to include the jQuery library. The next line is where we use the js method that we discussed earlier. What will be produced for this line from index is <script src="/js/index.js" type="text/javascript"></script>. It will be similar for the page1 line. Our two views are also very simple. The only thing in them that we're really going to use is the
<div id="page_container"></div> page_container div. Here is view/index.xhtml:<!-- view/index.xhtml -->
<h2>Hello World</h2>
<div id="page_container"></div>and view/page1.xhtml:
<h2>Page 1</h2>
<div id="page_container"></div>Finally, we have our two JavaScript files. Once again, very little. All we're going to do is grab the page_container div and set it's html value. This isn't a very good use of JavaScript in general and jQuery specifically, but it should at least work.
Here's public/js/index.js:
// public/js/index.js
// For jQuery put everything inside of the document ready code.
$(document).ready(function() {
// Add markup to page_container
$("#page_container").html("Index from Javascript");
}
);
and public/js/page1.js:
// public/js/page1.js
// For jQuery put everything inside of the document ready code.
$(document).ready(function() {
// Add markup to page_container
$("#page_container").html("Page 1 from Javascript");
}
);
This really is pretty simple, but I did want to show how the js method could be used. As I noted above, there's also a similar command for css as well as the js_for and css_for noted above. Sorry about the lack of formatting on the JavaScript.
Let me know if you have any questions or comments.
No comments:
Post a Comment