phoenix_components

Phoenix_components

ไลบรารีนี้ช่วยให้คุณเขียนบิตที่ห่อหุ้มของ HTML ลงในหน่วยเดียวที่เรียกว่าส่วนประกอบในเว็บไซต์เซิร์ฟเวอร์ของคุณที่แสดงเว็บไซต์ฟีนิกซ์ คล้ายกับวิธีการตอบสนอง/ember/web components

หนังสือพิมพ์

• เรื่องย่อ
• การติดตั้ง
• เริ่มต้นอย่างรวดเร็ว
• การกำหนดค่า
• ใบอนุญาต

เรื่องย่อ

คุณสามารถสร้างส่วนประกอบใหม่ด้วยเครื่องกำเนิดไฟฟ้าในตัว

 $ mix phoenix.gen.component button
* creating web/components/button/view.ex
* creating web/components/button/template.html.eex
* creating test/components/button_test.exs

จากนั้นคุณสามารถใช้องค์ประกอบใหม่ในเทมเพลต

 # /web/views/page_view.ex
defmodule MyApp.PageView do
  use MyApp.Web , :view
  use PhoenixComponents.View

  import_components [ :button ]
end 

# /web/templates/page/show.html.eex

<%= button type: :primary do % >
  My cool button!
<% end % >

ด้วยคำจำกัดความส่วนประกอบที่เกี่ยวข้อง

 # /web/components/button/view.ex
defmodule MyApp.Components.ButtonView do
  use PhoenixComponents.Component

  def class_for_type ( type ) do
    "btn btn--" <> to_string ( type )
  end
end 

# /web/components/button/template.html.eex
< button class = " <%= class_for_type @attrs.type %> " >
  <%= @content % >
</ button >

การติดตั้ง

เพิ่ม phoenix_components ใน mix.exs deps ของคุณ:

 def deps do
  [ { :phoenix_components , "~> 1.0.0" } ]
end

จากนั้นคุณต้องเพิ่มการกำหนดค่าหนึ่งรายการลงในไฟล์กำหนดค่าของคุณ

 config :phoenix_components , app_name: MyApp

โดยที่ MyApp เป็นโมดูลที่แสดงถึงแอพฟีนิกซ์ของคุณ

ขั้นตอนพิเศษสำหรับยาอายุวัฒนะ 1.3 และต่ำกว่า

หากคุณกำลังใช้ Elixir 1.3 หรือต่ำกว่าอย่าลืมเพิ่มภายใต้รายการแอปพลิเคชันของคุณใน mix.exs

 def application do
  [ applications: [ :phoenix_components ] ]
end 

เริ่มต้นอย่างรวดเร็ว

นี่เป็นภาพรวมอย่างรวดเร็วของวิธีการสร้างและใช้ส่วนประกอบในแอปพลิเคชันของคุณ

1. การนำเข้า phoenixComponents. ดูในมุมมองแอปพลิเคชันทั้งหมด

หลังจากติดตั้งการพึ่งพาคุณต้องกำหนดค่าแอปพลิเคชันของคุณ

คุณสามารถทำได้โดยการเพิ่มบรรทัดนี้ในไฟล์ web/web.ex ของคุณ

ค้นหา def view do line และอัปเดตเพื่อรวมบรรทัดนี้

 def view do
  quote do
    use Phoenix.View , root: "web/templates"
    use PhoenixComponents.View # Add this line
    ...

2. การสร้างส่วนประกอบ button

ส่วนประกอบฟีนิกซ์ถูกกำหนดโดยสองส่วนที่แตกต่างกันมุมมองและเทมเพลต มุมมองมีฟังก์ชั่นผู้ช่วยและแม่แบบมี HTML

ในการสร้างส่วนประกอบปุ่มคุณต้องสร้างไฟล์มุมมอง web/components/button/view.ex ด้วยเนื้อหาต่อไปนี้

 defmodule MyApp.Components.Button do
  use PhoenixComponents.Component

  def classes do
    "btn btn-default"
  end
end

จากนั้นสร้างไฟล์เทมเพลต web/components/button/template.html.eex ด้วยเนื้อหาต่อไปนี้

< button class = " <%= classes %> " >
  <%= @content % >
</ button >

โปรดทราบว่าตัวแปร @content จะมีเนื้อหาที่กำหนดไว้ในบล็อกปุ่ม ส่วนถัดไปแสดงสิ่งนี้ในรายละเอียดเพิ่มเติม

3. การใช้ส่วนประกอบ

คุณสามารถใช้ส่วนประกอบจากเทมเพลตใด ๆ โดยใช้ component ฟังก์ชันตัวช่วย

ในเทมเพลตใด ๆ เช่น web/templates/pages/show.html.eex เพิ่มส่วนประกอบปุ่ม

 <%= component :button do % >
  My cool button!
<% end % >

เนื้อหาภายในบล็อกส่วนประกอบถูกส่งผ่านไปยังส่วนประกอบเป็นตัวแปร @content

4. การนำเข้าส่วนประกอบไปยังมุมมอง

คุณสามารถนำเข้าส่วนประกอบในมุมมองใด ๆ โดยใช้ฟังก์ชัน import_components สิ่งนี้จะช่วยให้คุณหลีกเลี่ยงการเรียกผู้ช่วย component และใช้ชื่อของส่วนประกอบแทนแทน

defmodule MyApp.PageView do
  use Phoenix.Web, :view
  import_components [:button, :jumbotron]
end

จากนั้นคุณสามารถใช้ผู้ช่วยเหล่านี้จากเทมเพลตของคุณ

 <%= button type: :submit do % >
  Submit form!
<% end % >

5. การใช้แอตทริบิวต์ภายในส่วนประกอบของคุณ

เมื่อเรียกส่วนประกอบคุณสามารถผ่านแอตทริบิวต์ใด ๆ ที่คุณต้องการ

 <%= button type: :submit do % >
  Submit form!
<% end % >

ภายในเทมเพลตของส่วนประกอบคุณลักษณะเหล่านี้จะมีอยู่ในแผนที่ @attrs

< button type = " <%= @attrs.type %> " >
  <%= @content % >
</ button >

การกำหนดค่า

คุณสามารถกำหนดค่าตำแหน่งที่จะวางส่วนประกอบได้โดยแก้ไขไฟล์กำหนดค่าแอปพลิเคชันของคุณ config/config.exs

 config :phoenix_components , path: "lib/foo/bar"

ส่วนประกอบจะได้รับจาก web โดยค่าเริ่มต้น

สุขภาพของโครงการ

ใบอนุญาต

Phoenix_components ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT

ดูใบอนุญาตสำหรับข้อความใบอนุญาตเต็มรูปแบบ