编写 Tao Page - mycolorway/tao_on_rails GitHub Wiki

Tao on Rails 已经默认提供了 Page 组件的 Base 类：后端的 TaoOnRails::Components::PageComponent 定义了页面容器的 render 逻辑和 view helper 方法；前端的 TaoPage 定义了页面默认的交互逻辑。

如果项目是通过 Tao on Rails 的新项目模版生成的，那么 layouts/application.html 里面已经默认采用 TaoPage 的 view helper 来渲染页面容器，否则需要手动修改一下 application.html 的 body：

<body>
  <%= tao_page layout: 'default' do %>
    <%= yield %>
  <% end %>
</body>

在开发新页面的时候，除了编写 routes、controllers、views 里面的相关代码，另外需要创建 app/assets/javascripts/resource/action_name.coffee 和 app/assets/stylesheets/resource/action_name.scss，例如：

# app/assets/javascripts/companies/index.coffee

class CompaniesIndexPage extends TaoPage

  @tag 'companies-index-page'

  _init: ->
    # called when the page connected to dom for the first time

  _connected: ->
    # called every time the page connected to dom

  _disconnected: ->
    # called every time the page disconnected from dom

TaoPage.register CompaniesIndexPage
// app/assets/stylesheets/companies/index.coffee

.companies-index-page {
}

其中页面对应的 Custom Element 的 tag name 约定为：

def page_id
  controller_names = controller_path.split('/')
  [controller_names, action_name].compact.flatten.join('_').dasherize
end

如果想定义一些项目特殊的全局页面交互逻辑，可以创建一个 ApplicationPage 类继承自 TaoPage，把页面通用逻辑写在这个类里面，然后所有的页面都继承自 ApplicationPage。

⚠️ **GitHub.com Fallback** ⚠️