ex_cell

ex_cell

Ein Modul zum Erstellen gekoppelter Module von CSS, JavaScript und Ansichten in Phoenix.

Installation

Fügen Sie Folgendes zu den Abhängigkeiten in mix.exs hinzu:

 { :ex_cell , "~> 0.0.14" }

In Phoenix 1.3.0+ Fügen Sie lib/app_web/web.ex Folgendes hinzu:

 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

Jetzt können Sie ein Zellen/ Verzeichnis in lib/ app_web hinzufügen und Zellen in dieses Verzeichnis platzieren.

Jede Zelle sollte eine View.ex und eine template.html.eex enthalten. Die Ansicht und die Vorlage sind von der Zelle eng miteinander verbunden.

CSS

Um sicherzustellen, dass alle CSS neben Ihrer Zelle platziert werden können, müssen Sie Ihren brunch-config.js Folgendes hinzufügen:

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

Wenn Sie etwas anderes als Brunch verwenden, um Ihre Vermögenswerte zu verwalten, müssen Sie die Dateien zum Assets Manager der Wahl hinzufügen.

JavaScript

Wenn Sie die begleitende Cell-JS-Bibliothek verwenden möchten, können Sie sie mit Ihrem Paketmanager installieren. Nachdem Sie das JavaScript-Paket installiert haben, fügen Sie Folgendes zu Ihrem brunch-config.js hinzu:

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

Verwendung

Eine Zelle besteht aus ein paar Dateien:

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

Sie können die Zelle in einer Ansicht, Controller oder einer anderen Zelle rendern, indem Sie den folgenden Code hinzufügen:

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

Dies würde das folgende HTML erzeugen, wenn Sie die Zelle rendern:

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

View.ex

Ansichten von Zellen verhalten sich wie normale Ansichten in Phoenix, mit der Ausnahme, dass sie eine Containermethode bereitstellen, die in einer Vorlage verwendet werden kann, um die geeignete HTML zu rendern, die zur Initialisierung des JavaScripts für eine Zelle erforderlich ist, und eine vordefinierte Klasse haben, die dem Zellnamen ohne den Namespace entspricht.

 # 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

Die Vorlage versteckt sich wie jede andere Vorlage in Phoenix, außer dass sie Zugriff auf eine Containermethode haben, um den entsprechenden HTML -Container der Zelle zu rendern:

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

Dies kann jede Art von CSS -Datei sein, die Sie wünschen (vorverarbeitet oder anderer Hinweise). Da Zellen Methoden zum Namenspace Ihres CSS bereitstellen, wird Ihnen empfohlen, einen ähnlichen Namespace zu verwenden oder so etwas wie Postcss-Modules zu verwenden, um sicherzustellen, dass alle definierten Klassen eindeutig sind.

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

Wenn Sie Cell-Js verwenden, können Sie JavaScript erstellen, das eng mit der Zelle gekoppelt ist:

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

Verschachtelte Zellen

Für verschachtelte Zellen (z. B. AppWeb.User.AvatarCell ) stellen Sie sicher, dass Sie den Namespace in das Stylesheet/JavaScript aufnehmen.

. User-AvatarCell {}

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

Im Zweifelsfall entspricht der Zellname dem data-cell im DOM-Element.