Tritium Function Design pour Responsive/JavaScript Frameworks

Question

J'utilise Moovweb/Tritium pour rendre un site de bureau régulier sensible en utilisant le framework Zurb Foundation.

Dans le cadre de ce que je voudrais créer des fonctions d'aide pour activer les widgets Foundation comme le Uranium integrations déjà dans Moovweb. Mais certains des composants Foundation, comme le top bar ont des dispositions complexes qui nécessitent plus de configuration que ce qui semble raisonnable dans un seul appel de fonction.

Par exemple, ce qui permet la barre supérieure exige quelque chose comme la structure suivante:

# 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") 
     } 
    } 
    } 
} 

Quelle est la bonne façon de faire abstraction ceci dans les fonctions de tritium réutilisables qui réduisent au minimum boilerplate permettent encore de flexibilité?

Answer 1

Dans mon cas d'utilisation, j'ai géré cela en divisant la disposition en fonctions connexes qui s'imbriquent les unes dans les autres. Ainsi, le code original ci-dessus devient:

# 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") 
    }   
    } 
} 

où les fonctions sont définies comme suit:

@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() 
    } 
    } 
} 

Vous pouvez imaginer une fonction zurb_topbar_right qui pourrait éventuellement être utilisé pour définir la partie droite de la barre supérieure. Les hrefs et la structure des <LI> s sont codés en dur car il est peu probable que vous souhaitiez généralement pointer href n'importe où, à l'exception de la racine. Au lieu de cela, les parties susceptibles d'être personnalisées sont le titre de la barre supérieure, le titre du bouton Menu et la présence de l'icône de la barre de menu.

Alors que pour zurb_topbar_left le contenu <LI> va probablement être rempli par le programmeur, d'où le rendement.

Le compromis entre semble que l'application automatique que la bonne combinaison de fonctions sont utilisées dans le droit chemin devient plus délicat, à savoir

• vous devez utiliser les deux zurb_topbar et zurb_topbar_title
• mais seulement l'un des zurb_topbar_left ou zurb_topbar_right
• zurb_topbar doit inclure zurb_topbar_left
• etc., etc.