ex_cell

ex_cell

โมดูลสำหรับการสร้างโมดูลคู่ของ CSS, JavaScript และมุมมองในฟีนิกซ์

การติดตั้ง

เพิ่มสิ่งต่อไปนี้ในการพึ่งพาใน mix.exs :

 { :ex_cell , "~> 0.0.14" }

ในฟีนิกซ์ 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

เพื่อให้แน่ใจว่า 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 >

view.ex

มุมมองของเซลล์มีพฤติกรรมเหมือนมุมมองปกติในฟีนิกซ์ยกเว้นว่าพวกเขามีวิธีคอนเทนเนอร์ที่สามารถใช้ในเทมเพลตเพื่อแสดง HTML ที่เหมาะสมที่จำเป็นในการเริ่มต้น JavaScript สำหรับเซลล์และมีคลาสที่กำหนดไว้ล่วงหน้า

 # 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

หากคุณใช้ 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 ) ตรวจสอบให้แน่ใจว่าคุณได้รวมเนมสเปซไว้ในสไตล์ชีท/จาวาสคริปต์

. User-AvatarCell {}

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

เมื่อมีข้อสงสัยชื่อเซลล์สอดคล้องกับแอตทริบิวต์ data-cell ในองค์ประกอบ DOM