ex_cell

ex_cell

Modul untuk membuat modul coupled dari CSS, JavaScript dan tampilan di Phoenix.

Instalasi

Tambahkan yang berikut ini ke dependensi di mix.exs :

 { :ex_cell , "~> 0.0.14" }

Di phoenix 1.3.0+ Tambahkan yang berikut ini ke 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

Sekarang Anda dapat menambahkan sel/ direktori di lib/ app_web dan menempatkan sel di direktori itu.

Setiap sel harus berisi view.ex dan template.html.eex. Tampilan dan template dihubungkan dengan ketat oleh sel.

CSS

Untuk memastikan semua CSS dapat ditempatkan di sebelah sel Anda, Anda perlu menambahkan berikut ini ke brunch-config.js Anda:

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

Jika Anda menggunakan sesuatu selain brunch untuk mengelola aset Anda, Anda perlu menambahkan file ke manajer aset pilihan.

Javascript

Jika Anda ingin menggunakan perpustakaan sel-JS yang menyertainya, Anda dapat menginstalnya dengan manajer paket Anda. Setelah Anda menginstal paket JavaScript, tambahkan yang berikut ini ke brunch-config.js Anda:

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

Penggunaan

Sel terdiri dari beberapa file:

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

Anda dapat membuat sel dalam tampilan, pengontrol atau sel lain dengan menambahkan kode berikut:

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

Ini akan menghasilkan HTML berikut saat Anda membuat sel:

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

view.ex

Pandangan sel berperilaku seperti pandangan normal di Phoenix, kecuali bahwa mereka telah memberikan metode wadah yang dapat digunakan dalam templat untuk membuat HTML yang sesuai yang diperlukan untuk menginisialisasi javascript untuk sel dan memiliki kelas yang telah ditentukan sebelumnya yang sama dengan nama sel dikurangi 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

Templat berperilaku seperti templat lain di Phoenix kecuali bahwa mereka memiliki akses ke metode wadah untuk membuat wadah html sel yang sesuai:

 <!-- 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

Ini bisa berupa semua jenis file CSS yang Anda inginkan (preproses atau bijaksana lainnya). Karena sel menyediakan metode untuk namespace CSS Anda, Anda disarankan untuk menggunakan namespace serupa atau menggunakan sesuatu seperti modul postcss untuk memastikan semua kelas yang ditentukan unik.

 /* 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

Jika Anda menggunakan sel-JS, Anda dapat membuat javascript yang sangat erat digabungkan ke sel:

 // 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 ; 

Sel bersarang

Untuk sel bersarang (misalnya AppWeb.User.AvatarCell ) pastikan Anda memasukkan namespace dalam stylesheet/javascript.

. User-AvatarCell {}

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

Jika ragu, nama sel sesuai dengan atribut data-cell pada elemen DOM.