ex_cell

EX_CELL

用于创建凤凰城中CSS，JavaScript和视图的耦合模块的模块。

安装

将以下内容添加到mix.exs中的依赖项中：

 { :ex_cell , "~> 0.0.14" }

在Phoenix 1.3.0+中，将以下内容添加到lib/app_web/web.ex ：

 def controller do
  quote do
  ...

  import ExCell.Controller

  ...
  end
end

def view ( opts \ [ ] ) do
  quote do
    ...

    import ExCell.View

    ...
  end
end

def cell ( opts \ [ ] ) do
  quote do
    use ExCell.Cell , namespace: AppWeb ,
                     adapter: ExCell.Adapters.CellJS

    use Phoenix.View , root: "lib/app_web/cells" ,
                      path: ExCell.View . relative_path ( __MODULE__ , AppWeb )

    import Phoenix.Controller ,
           only: [ get_csrf_token: 0 , get_flash: 2 , view_module: 1 ]

    use Phoenix.HTML

    import AppWeb.Router.Helpers
    import AppWeb.Gettext

    # Add everything you want to use in the cells
  end
end

现在，您可以在lib/ app_web中添加一个单元/目录，并将单元格放入该目录中。

每个单元格都应包含view.ex和tamplate.html.eex。视图和模板与单元格紧密地链接在一起。

CSS

为了确保可以将所有CS放置在您的单元旁边，您需要将以下内容添加到您的brunch-config.js ：

...
stylesheets : {
  joinTo : {
    "css/app.css" : [
      "assets/css/app.css" ,
      "lib/app_web/cells/**/*.css"
    ]
  }
}
. . .

如果您使用早午餐以外的其他东西来管理您的资产，则需要将文件添加到首选的资产管理器中。

JavaScript

如果您想使用随附的单元JS库，则可以使用软件包管理器安装它。安装JavaScript软件包后，将以下内容添加到您的brunch-config.js ：

...
javascripts : {
  joinTo : {
    "js/vendor.js" : / ^node_modules / ,
    "js/app.js" : [
      "assets/js/**/*.js" ,
      "lib/app_web/cells/**/*.js"
    ]
  }
}
. . . 

用法

一个单元格由几个文件组成：

 cells
|- avatar
|  |- template.html.eex
|  |- view.ex
|  |- style.css (optional)
|  |- index.js (optional)
|- header
...

您可以通过添加以下代码在视图，控制器或其他单元格中渲染单元格：

 cell ( AvatarCell , class: "CustomClassName" , user: % User { } )

当您渲染单元格时，这将生成以下HTML：

 < span class =" AvatarCell " data-cell =" AvatarCell " data-cell-params =" {} " >
  < img src =" /images/foo/avatar.jpg " class =" AvatarCell-Image " alt =" foo " />
</ span >

view.ex

单元格的视图在凤凰城的表现就像普通视图一样，除了它们提供了一种容器方法，可以在模板中使用该方法来渲染适当的HTML来初始化单元格的JavaScript并具有与单元格名称相同的预定类别的类别，该类名称为namespace。

 # lib/app_web/cell/avatar/view.ex
defmodule AppWeb.AvatarCell do
  @ moduledoc """
  The avatar cell used to render the user avatars.
  """

  use AppWeb , :cell
  alias App.Accounts.Avatar

  def class_names ( assigns ) do
    [ assigns [ :class ] , class_name ( assigns [ :size ] ) ]
    |> Enum . reject ( fn ( v ) -> is_nil ( v ) end )
  end

  def avatar_image_path ( user ) do
    Avatar . url ( { user . avatar , user } , :thumb )
  end

  def avatar_image_alt ( user ) do
    [ user . first_name , user . last_name ]
    |> Enum . join ( " " )
    |> String . trim ( )
  end
end

template.html.eex

该模板的行为就像凤凰城的任何其他模板一样，除了它们可以访问容器方法以渲染适当的单元格HTML容器：

 <!-- lib/app_web/cell/avatar/template.html.eex -->
<%= container ( tag: :span ,  class: class_names (assigns)) do % >
  <%= if image_path = avatar_image_path ( @user ) do % >
    <%= img_tag (image_path, class: class_name ( " image " ), alt: avatar_image_alt ( @user )) % >
  <% end % >
<% end % >

style.css

这可以是您希望的任何类型的CSS文件（预处理或其他明智）。由于细胞提供了命名CSS命名的方法，因此建议您使用类似的名称空间或使用诸如PostCSS模型之类的内容来确保定义的所有类都是唯一的。

 /* lib/app_web/cell/avatar/style.css */
. AvatarCell {
  border-radius : 50 % ;
  height : 50 px ;
  width : 50 px ;
}

. AvatarCell-image {
  display : inline-block;
  max-width : 100 % ;
}

index.js

如果使用单元JS，则可以创建紧密耦合到单元格的JavaScript：

 // lib/app_web/cells/avatar/index.js
import { Cell , Builder } from "@defacto/cell-js" ;

class AvatarCell extends Cell {
  initialize ( ) {
    this . element . addEventListener ( "click" , this . onToggleOpenClass ) ;
  }

  onToggleOpenClass = e => this . element . classList . toggle ( "open" ) ;
}

Builder . register ( AvatarCell , "AvatarCell" ) ;

export default AvatarCell ; 

嵌套细胞

对于嵌套单元格（例如AppWeb.User.AvatarCell ），请确保在样式表/javascript中包含名称空间。

. User-AvatarCell {}

 Builder . register ( AvatarCell , "User-AvatarCell" ) ;

如有疑问，单元格名称对应于DOM元素上的data-cell属性。