Use haml templates

opal · Dec 17, 2013 · f52992d · f52992d
1 parent be8f5f9
commit f52992d
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 20 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
 gem 'opal',           :github => 'opal/opal'
-gem 'opal-sprockets', :github => 'opal/opal-sprockets'
 gem 'opal-jquery',    :github => 'opal/opal-jquery'
 gem 'vienna',         :github => 'opal/vienna'
+gem 'opal-haml'
diff --git a/app/app.rb b/app/app.rb
@@ -1,7 +1,7 @@
 require 'opal'
 require 'jquery'
 require 'opal-jquery'
-require 'erb'
+require 'opal-haml'
 require 'vienna'
 
 require 'views/app_view'
@@ -15,7 +15,6 @@
 class Application
   def run
     @app_view = AppView.new
-
     router.update
   end
 

diff --git a/app/templates/footer.haml b/app/templates/footer.haml
@@ -0,0 +1,15 @@
+%span#todo-count
+  %strong= @active
+  = todo_count
+
+%ul#filters
+  %li
+    %a(href="#/") All
+  %li
+    %a(href="#/active") Active
+  %li
+    %a(href="#/completed") Completed
+
+- if show_completed?
+  %button#clear-completed
+    = "Clear completed (#@completed)"
diff --git a/app/templates/footer.opalerb b/app/templates/footer.opalerb
diff --git a/app/templates/todo.haml b/app/templates/todo.haml
@@ -0,0 +1,6 @@
+.view
+  %input.toggle{type: "checkbox", checked: @todo.completed}
+  %label= @todo.title
+  %button.destroy
+
+%input.edit{value: @todo.title}
diff --git a/app/templates/todo.opalerb b/app/templates/todo.opalerb
diff --git a/app/views/app_view.rb b/app/views/app_view.rb
@@ -47,4 +47,13 @@ def render
 
     @footer.html = @template.render(self)
   end
+
+  def todo_count
+    prefix = @active == 1 ? 'item' : 'items'
+    prefix + " left"
+  end
+
+  def show_completed?
+    @completed > 0
+  end
 end