ex_cell

ex_cell

Модуль для создания связанных модулей CSS, JavaScript и представлений в Phoenix.

Установка

Добавьте следующее в зависимости в 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

Чтобы все CSS можно было размещать рядом с вашей ячейкой, вам нужно добавить следующее в свой brunch-config.js :

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

Если вы используете что -то другое, кроме позднего завтрака для управления вашими активами, вам необходимо добавить файлы в менеджер по активам.

JavaScript

Если вы хотите использовать сопровождающую библиотеку 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

Шаблон ведут себя как любой другой шаблон в 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 % >

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 ) убедитесь, что вы включите пространство имен в стиле/javaScript.

. User-AvatarCell {}

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

Если вы сомневаетесь, имя ячейки соответствует атрибуту data-cell на элементе DOM.