Skip to content
pyromaniac edited this page Sep 23, 2011 · 5 revisions

Common

Components is important part of puffer. It behaves similar to cells or even apotomo. Components stored at app/components folder.

Every component should provide actions, repeating controllers fieldsets names.

class SampleComponent < BaseComponent # or Puffer::Component::Base
  def index
    render
  end

  def form
    render
  end
end

Views for this components are stored at app/components/sample.

Rendering

The simplified algoritm of components rendering:

# puffer/base/index.html.erb
@records.each do |record|
  index_fields.each do |field|
    field.suitable_component_instance.process :index, :record => record
  end
end

Same is for other actions and fieldsets.

Field, rendered by components is avaible via field variable. Also the options transferred to processed component action are avaible via opts hash. Ex: opts[:record] or opts[:form] for componets rendered inside form builder block.

Updating

Every component is independent container which can be updated separately from the rest page. To perform it you should do two simple steps:

  1. Wrap all the component action view content with component_wrap helper method. By default it creates <span> tag wrapper, but you can provide similar to content_tag arguments, except :id option, which will be overwrited.

    # app/components/sample/index.html.haml
    = component_wrap do
      = opts[:record].count
      link_to 'increase count', event_path(:inc_count, :id => opts[:record].to_param, :inc_by => 2)
    

    event_path or event_url helpers generates uri for event action, where you can send your data - the second argument hash.

  2. Create an update action:

    def index
      render
    end
    
    def inc_count
      resource.member.update_attribute :count, resource.member.count + params[:inc_by] # this will inc count by 2
      replace :index # use replace instead of render with view name option and all the indec view content will be wrapped with replace javascript
    end
    

    It is really similar to apotomo, but simplier.

Also there is puffer:component generator.