TodoList

Next -> [[tutorials:todolist/9|Ninth Step, Prettify]] [[tutorials:todolist/7|Seventh Step, delete tasks]] <- Prev ====== Eighth Step, Elements ====== This is called an Element, Ramaze will go and search for a class that matches the name Page and responds to #render. Then it will go and hand the content in between to that Element. Sounds weird? Let us have a look at our templates, they got some repetitive stuff, like:


  
    TodoList
  
  
    some title

How about replacing that with something short and reusable:


  your other content

Would be nice of course, and when you start having more templates it makes an awful lot of sense being able to change the enclosing stuff in one place. So let's apply DRY here as well. Take a look at the **src/element/page.rb**

class Page < Ezamar::Element
  def render
    %{
    
      
        Welcome to Ramaze
      
      
        #{content}
      
    
    }
  end
end

Alright, most things we need are in place already, the most important thing is the #content method that we call with #{content} inside the string in #render. Just adopt it to your liking, I'll just use the things we had in our templates so far:

class Page < Ezamar::Element
  def render
    %{
    
      
        TodoList
      
      
        #{@title}
        #{content}
      
    
    }
  end
end

Please note that instance variables reflecting the parameters are set. And let's change our templates as well. First the **view/index.xhtml*


  New Task
  
    No Tasks
  
    
      
        
          #{title}: #{status} [ #{toggle} | #{delete} ]

and the **view/new.xhtml**


  Back to TodoList
  
    Task:

Alright, now just go and look at the result in the browser, try changing the things inside the Element and look at how it behaves. Next -> [[tutorials:todolist/9|Ninth Step, Prettify]] [[tutorials:todolist/7|Seventh Step, delete tasks]] <- Prev