Tritium-Funktionsdesign für Responsive / JavaScript-Frameworks - zurb-foundation, moovweb, tritium

Ich verwende Moovweb / Tritium, um eine reguläre Desktop-Site mit dem Zurb-Framework zu erstellen.

Als Teil davon möchte ich Hilfsfunktionen erstellen, um Foundation-Widgets wie das Uranintegrationen schon in Moovweb. Aber einige der Foundation-Komponenten, wie die obere Leiste haben komplexe Layouts, die mehr Konfiguration erfordern, als in einem einzelnen Funktionsaufruf vernünftig erscheint.

Zum Beispiel erfordert die Aktivierung der oberen Leiste etwas wie die folgende Struktur:

# Use the foundation topbar
insert_top("nav", class: "top-bar") {

# Create the title area
insert("ul", class: "title-area") {
inject("<li class="name"><h1><a href="/">Website Name</a></h1></li>")
inject("<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>")
}

# Grab the header links and put them in the top bar
insert("section", class: "top-bar-section") {
insert("ul", class: "left") {

# Move the original header links here
move_here("//span[@class="pagetop"]//a"){
wrap("li")
}
}
}
}

Was ist der richtige Weg, um dies in wiederverwendbare Tritium-Funktionen zu verwandeln, die das Mindestmaß minimieren und dennoch Flexibilität ermöglichen?

Antworten:

3 für die Antwort № 1

In meinem Anwendungsfall behandelte ich dies, indem ich das Layout in verwandte Funktionen aufteilte, die ineinander verschachtelt sind. So wird der ursprüngliche Code oben:

# enable the foundation top bar
zurb_topbar() {
zurb_topbar_title("Website Name", "Menu", "menu-icon")
zurb_topbar_left() {
move_here("//span[@class="pagetop"]//a"){
wrap("li")
}
}
}

wo die Funktionen definiert sind als:

@func XMLNode.zurb_topbar() {
insert_top("nav", class: "top-bar") {
yield()
}
}

@func XMLNode.zurb_topbar_title(Text %name, Text %menu_btn_name, Text %menu_icon) {
insert("ul", class: "title-area") {
inject("<li class="name"><h1><a href="/">" +%name +"</a></h1></li>")
inject("<li class="toggle-topbar "+%menu_icon+""><a href="#"><span>"+%menu_btn_name+"</span></a></li>")
}
}

@func XMLNode.zurb_topbar_left() {
insert("section", class: "top-bar-section") {
insert("ul", class: "left") {
yield()
}
}
}

Du könntest dir ein a vorstellen zurb_topbar_right Funktion, die optional zur Definition des rechten Abschnitts der Topbar verwendet werden kann.

Hinweis für die zurb_topbar_title die hrefs und struktur der <LI>s sind hart codiert, weil es unwahrscheinlich ist, dass Sie es tunIn der Regel möchten Sie href nirgendwo anders als root anzeigen. Stattdessen sind die Teile, die Sie anpassen möchten, der Titel der Topleiste, der Titel der Menüschaltfläche und das Symbol der Menüleiste.

Während für zurb_topbar_left das <LI> Der Inhalt wird wahrscheinlich vom Programmierer gefüllt, daher der Ertrag.

Der Kompromiss scheint darin zu bestehen, dass es automatisch schwieriger wird, die richtige Kombination von Funktionen richtig einzusetzen.

  • Sie müssen beide verwenden zurb_topbar und zurb_topbar_title
  • aber nur einer von zurb_topbar_left oder zurb_topbar_right
  • zurb_topbar muss enthalten zurb_topbar_left
  • etc. usw.

Verwandte Fragen