- rails view helpers instead of Isotope module methods

- rails 3 init file
- improved rails app samples
- plugin in rails sample app symlinked

.gitignore

@@ -1,3 +1,4 @@
+gem-public_cert.pem
 examples/rails3-example/log
 examples/rails3-example/tmp
-pkg
+pkg

Manifest

@@ -2,6 +2,7 @@ CHANGELOG.rdoc
 Gemfile
 Gemfile.lock
 LICENSE
+Manifest
 README.md
 Rakefile
 examples/rails3-example/Gemfile
@@ -54,10 +55,11 @@ examples/rails3-example/test/performance/browsing_test.rb
 examples/rails3-example/test/test_helper.rb
 examples/rails3-example/test/unit/helpers/article_helper_test.rb
 examples/rails3-example/test/unit/helpers/articles_helper_test.rb
+examples/rails3-example/tmp/pids/server.pid
 examples/sinatra-example/server.rb
+isotope.gemspec
 lib/isotope.js
 lib/isotope.rb
 lib/version.rb
 test/article.ejs
 test/isotope_spec.rb
-Manifest

README.md

@@ -2,7 +2,7 @@
 
 ## The problem:
 
-In Ajax-based sites, there's a constant dilemma: How to get objects rendered in templates? In server side (and output full HTML)? Client side (and mess with JSON objects)?
+In Ajax-based sites, there's a constant dilemma: How to get objects rendered in templates? In server side (and output full HTML)? Client side (and mess with JSON objects and HTML strings/DOM generation)?
 What should be the role division between server and client?
 
 ## Common Approaches, Pros & Cons:
@@ -18,15 +18,15 @@ Evaluate a simple ERB partial with a local object, and server it as a **string**
 in a view, or from a controller and request it by Ajax.
 
 This partial can look like:
-	
-	<h2><%=article.title%></h2>
+
+	<h2><%= article.title %></h2>
 	<div class="content">
-	<%=article.content%>
+	<%= article.content %>
 	</div>
 	<ul class="tags">
-		<%article.tags.each { |tag|%>
-		<li><%=tag.name%></li>
-		<%}%>
+		<% article.tags.each { |tag| %>
+		<li><%= tag.name %></li>
+		<% } %>
 	</ul>
 		
 #### Pros
@@ -46,20 +46,20 @@ This partial can look like:
 Having an EJS template in the HTML code, with techniques such as John Resig's [JavaScript Micro-Templating](http://ejohn.org/blog/javascript-micro-templating/)
 
 	<script type="text/html" id="article-template">
-	<h2><%=item.title%></h2>
+	<h2><%= item.title %></h2>
 
 	<div class="content">
-	<%=item.content%>
+	<%= item.content %>
 	</div>
 
 	<ul class="tags">
-		<%item.tags.forEach(function (tag) {%>
-		<li><%=tag.name%></li>
-		<%});%>
+		<% item.tags.forEach(function (tag) { %>
+		<li><%= tag.name %></li>
+		<% }); %>
 	</ul>
 	</script>
 
-Ask the server for a JSON article and evaluate the template with this object into a string, and place it inside a container, using a techniques as mentioned:
+Query the server for a JSON article and evaluate the template with this object into a string, and place it inside a container, using a technique as mentioned:
 
 	var results = document.getElementById("results"); // some container on the page
 	results.innerHTML = tmpl("article-template", article); // article is an object, probably a result of an AJAX JSON request
@@ -80,14 +80,14 @@ The template can be first evaluated on the server with a Ruby object and on the
 
 Template file should look like:
 
-	<h2 class="data-title"><%=article.title%></h2>
+	<h2 class="data-title"><%= article.title %></h2>
 	<div class="content data-content">
-	<%=article.content%>
+	<%= article.content %>
 	</div>
 	<ul class="tags data-tags">
-		<%article.tags.each { |tag|%>
-		<li><%=tag.name%></li>
-		<%}%>
+		<% article.tags.each { |tag| %>
+		<li><%= tag.name %></li>
+		<% } %>
 	</ul>
 
 And then, from a JS function, doing something like:
@@ -114,7 +114,7 @@ And then, from a JS function, doing something like:
 
 ### So...
 
-In these three approaches, the developer needs to choose according to the task and the project requirements, or worse, maintaining two templates, ERB and EJS.
+In these three approaches, the developer needs to choose according to the task and the project requirements, or worse, maintain two templates, ERB and EJS.
 
 Each approach is written in a totally different way, and switching between the approaches means a lot of work.
 
@@ -143,16 +143,16 @@ Isotope gives the ability to have a single template file, and easily switch betw
 
 	# article.ejs
 
-	<h2><%=item.title%></h2>
+	<h2><%= item.title %></h2>
 
 	<div class="content">
-	<%=item.content%>
+	<%= item.content %>
 	</div>
 
 	<ul class="tags">
-		<%item.tags.forEach(function (tag) {%>
-		<li><%=tag.name%></li>
-		<%});%>
+		<% item.tags.forEach(function (tag) { %>
+		<li><%= tag.name %></li>
+		<% }); %>
 	</ul>
 
 ### On the Client Side
@@ -166,16 +166,16 @@ Outputting from the server side (controller or view)
 The above code will output:
 
 	<script type="text/x-isotope" id="article-template">
-	<h2><%=item.title%></h2>
+	<h2><%= item.title %></h2>
 
 	<div class="content">
-	<%=item.content%>
+	<%= item.content %>
 	</div>
 
 	<ul class="tags">
-		<%item.tags.forEach(function (tag) {%>
-		<li><%=tag.name%></li>
-		<%});%>
+		<% item.tags.forEach(function (tag) { %>
+		<li><%= tag.name %></li>
+		<% }); %>
 	</ul>
 	</script>
 
@@ -194,9 +194,6 @@ This code reads the source of the EJS file, uses Johnson and John Resig's techni
 
 ### Installation:
 
-	gem install isotope
-
-Or
 	# Rails 3.x
 	ruby script/rails plugin install git@github.com:elado/isotope.git
 
@@ -226,6 +223,10 @@ Add to config/environment.rb
 
 and run `rake gems:install`
 
+Add to config/environment.rb
+
+  require 'isotope'
+
 ##### Server Side Example:
 
 	# ArticlesController
@@ -278,6 +279,16 @@ Or, with a view:
 Actually the same usage, more or less.
 
 
+### Run Tests
+
+  rspec test/isotope_spec.rb
+
+Launch sample Rails app
+
+  cd examples/rails3-example && rails s
+
+and go to http://localhost:3000
+
 ---
 
 Would love to hear your comments!

Rakefile

@@ -2,7 +2,7 @@ require 'rubygems'
 require 'rake'
 require 'echoe'
 
-Echoe.new('isotope', '1.0.0') do |p|
+Echoe.new('isotope', '1.0.1') do |p|
   p.summary    = "Ruby Hybrid (Server and Client sides) templates"
   p.description = "Isotope provides an easy way to use a signle EJS template on both server and client side"
   p.url            = "http://github.com/elado/isotope"

examples/rails3-example/Gemfile

@@ -5,30 +5,4 @@ gem 'rails', '>=3.0.0'
 # gem 'isotope'
 gem 'json'
 gem 'johnson'
-
-# Bundle edge Rails instead:
-# gem 'rails', :git => 'git://github.com/rails/rails.git'
-
-gem 'sqlite3-ruby', :require => 'sqlite3'
-
-# Use unicorn as the web server
-# gem 'unicorn'
-
-# Deploy with Capistrano
-# gem 'capistrano'
-
-# To use debugger
-# gem 'ruby-debug'
-
-# Bundle the extra gems:
-# gem 'bj'
-# gem 'nokogiri'
-# gem 'sqlite3-ruby', :require => 'sqlite3'
-# gem 'aws-s3', :require => 'aws/s3'
-
-# Bundle gems for the local environment. Make sure to
-# put test-only gems in this group so their generators
-# and rake tasks are available in development mode:
-# group :development, :test do
-#   gem 'webrat'
-# end
+gem 'sqlite3-ruby', :require => 'sqlite3'

examples/rails3-example/app/controllers/articles_controller.rb

@@ -1,17 +1,15 @@
-require 'isotope'
-
 class ArticlesController < ApplicationController
   before_filter :find_article
 
-  def show_server_template_in_controller
-		render :text => Isotope.render_partial(Rails.root.join('app/views/articles/article.html.ejs'), :locals => { :item => @articles[0] })
+  def render_server_template_in_controller
+		render :text => isotope_render_partial('articles/article', :locals => { :item => @articles[0] })
   end
 
-  def show_server_template_in_view
+  def render_server_template_in_view
 
   end
 
-  def show_client
+  def render_client
 
   end
 
@@ -28,33 +26,33 @@ def article_object_list
   def find_article
 		@articles = [
 		  {
-        :title => "Hello!",
-        :content => "World!",
+        :title => "Article #1",
+        :content => "Article content #1",
         :tags => [
-          {:name => "tag 1"},
-          {:name => "tag 2"},
-          {:name => "tag 3"},
-          {:name => "tag 4"}
+          { :name => "tag 1" },
+          { :name => "tag 2" },
+          { :name => "tag 3" },
+          { :name => "tag 4" }
         ]
       },
       {
-        :title => "Hello 2!",
-        :content => "World 2!",
+        :title => "Article #2",
+        :content => "Article content #2",
         :tags => [
-          {:name => "tag 5"},
-          {:name => "tag 6"},
-          {:name => "tag 7"},
-          {:name => "tag 8"}
+          { :name => "tag 5" },
+          { :name => "tag 6" },
+          { :name => "tag 7" },
+          { :name => "tag 8" }
         ]
       },
       {
-        :title => "Hello 3!",
-        :content => "World 3!",
+        :title => "Article #3",
+        :content => "Article content #3",
         :tags => [
-          {:name => "tag 9"},
-          {:name => "tag 10"},
-          {:name => "tag 11"},
-          {:name => "tag 12"}
+          { :name => "tag 9" },
+          { :name => "tag 10" },
+          { :name => "tag 11" },
+          { :name => "tag 12" }
         ]
       }
     ]

examples/rails3-example/app/controllers/welcome_controller.rb

@@ -0,0 +1,4 @@
+class WelcomeController < ApplicationController
+  def index
+  end
+end

examples/rails3-example/app/views/articles/article.html.ejs

@@ -1,11 +1,13 @@
-<h2><%=item.title%></h2>
+<div class="article">
+  <h3><%=item.title%></h3>
 
-<div class="content">
-<%=item.content%>
-</div>
+  <div class="content">
+  <%=item.content%>
+  </div>
 
-<ul class="tags">
-	<%item.tags.forEach(function (tag) {%>
-	<li><%=tag.name%></li>
-	<%});%>
-</ul>
+  <ul class="tags">
+  	<%item.tags.forEach(function (tag) {%>
+    <li><a href="/tag/<%=encodeURIComponent(tag.name)%>"><%=tag.name%></a></li>
+  	<%});%>
+  </ul>
+</div>

examples/rails3-example/app/views/articles/render_client.html.erb

@@ -0,0 +1,29 @@
+<script>
+window.addEvent("domready",function () {
+	new Request.JSON({
+		url:"/articles/article_object",
+		onSuccess:function (data) {
+			$("single").set("html",Isotope($("article-template").get("text"),{ item:data }));
+		},
+	}).get();
+
+	new Request.JSON({
+		url:"/articles/article_object_list",
+		onSuccess:function (data) {
+			$("list").set("html",Isotope($("article-template").get("text"), data));
+		},
+	}).get();
+});
+</script>
+
+<%= isotope_render_template('articles/article', :id => "article-template").html_safe %>
+
+<h1>Articles</h1>
+
+<h2>Single Example</h2>
+
+<div id="single" class="article-list"></div>
+
+<h2>List Example</h2>
+
+<div id="list" class="article-list"></div>

examples/rails3-example/app/views/articles/render_server_template_in_view.html.erb

@@ -0,0 +1,5 @@
+<h1>Articles</h1>
+
+<div class="article-list">
+<%= isotope_render_partial('articles/article', :collection => @articles).html_safe %>
+</div>