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屬性。