ex_cell
v0.0.14
フェニックスで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とtemplate.html.eexを含める必要があります。ビューとテンプレートは、セルによってしっかりとリンクされています。
すべてのCSSをセルの隣に配置できるようにするには、 brunch-config.jsに次のことを追加する必要があります。
...
stylesheets : {
joinTo : {
"css/app.css" : [
"assets/css/app.css" ,
"lib/app_web/cells/**/*.css"
]
}
}
. . .ブランチ以外のものを使用して資産を管理する場合は、選択した資産マネージャーにファイルを追加する必要があります。
添付のCell-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 >セルのビューは、フェニックスの通常のビューのように振る舞いますが、セルのJavaScriptを初期化し、セル名が名前空間を引いたものと同じ定義済みクラスを持つために必要な適切なHTMLをレンダリングするためにテンプレートで使用できるコンテナメソッドを提供していることを除きます。
# 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テンプレートは、Phoenixの他のテンプレートと同様に動作しますが、適切なセル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 % >これは、希望するあらゆるタイプの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 % ;
}Cell-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など）については、StyleSheet/JavaScriptに名前空間を含めることを確認してください。
. User-AvatarCell {} Builder . register ( AvatarCell , "User-AvatarCell" ) ;疑わしい場合、セル名はDOM要素のdata-cell属性に対応します。
