Jade/Pug: Wie benutzt man ein Mixin in einem Parameter-Array eines anderen Mixins

Question

Ich versuche atomare Designmuster in Jade/Pug zu verwenden, um eine einfache Liste mit einem Link darin zu erstellen. Meine Liste mixin ist wie folgt und akzeptiert ein Array von Elementen:

include ../../atoms/listitem/listitem 
mixin list(spec) 
    - spec = spec || {} 
    - spec.__class = spec.__class || '' 
    - spec.type = spec.type || 'ul' 
    - spec.items = spec.items || {} 

    if spec.items.length 
     #{spec.type} 
      for item in spec.items 
       +listitem({content: item}) 

Liste item:

mixin listitem(spec) 
    - spec = spec || {} 
    - spec.__class = spec.__class || '' 
    - spec.content = spec.content || '' 

    li(class=spec.__class)&attributes(attributes) 
     != spec.content 

-Link:

mixin link(spec) 
    - spec = spec || {} 
    - spec.__class = spec.__class || '' 
    - spec.text = spec.text || 'Default Link' 

    a.link(class=spec.__class)&attributes(attributes) 
     if block 
      block 
     else 
      != spec.text 

Und in meiner Vorlage Ich habe folgende:

include _modules/atoms/link/link 
include _modules/molecules/list/list 

block content 
    +list({items: [ 
     'list item 1', 
     'list item 2', 
     +link({text: "Hi link"})(href="#"), 
     'list item 4' 
    ]}) 

Ich bekomme ein äh ror:

Aber wenn ich den Link außerhalb dieser Artikel-Array verwenden, funktioniert es gut. Was mache ich falsch?

Answer 1

Ach, Sie kein mixin in Jade als Argument für einen anderen mixin passieren kann. Wenn Sie Ihr Format größtenteils beibehalten möchten: Um die gewünschte Funktionalität zu erhalten, müssen Sie die Typerkennung in mehreren Instanzen verwenden und Ihr Argument als Array übergeben.

mixin listitem(spec) 
    - spec = spec || {} 
    - spec.__class = spec.__class || '' 
    - spec.content = spec.content || '' 

    li(class=spec.__class)&attributes(attributes) 
     if (typeof spec.content === 'string') 
     != spec.content 
     else 
     block 

mixin link(spec) 
    - spec = spec || {} 
    - spec.__class = spec.__class || '' 
    - spec.text = spec.text || 'Default Link' 
    - attributes = spec.attributes || '' 


    a.link(class=spec.__class)&attributes(attributes) 
     if block 
      block 
     else 
      != spec.text 


mixin list(spec) 
    - spec = spec || {} 
    - spec.__class = spec.__class || '' 
    - spec.type = spec.type || 'ul' 
    - spec.items = spec.items || {} 

    if spec.items.length 
     #{spec.type} 
      for item in spec.items 
       +listitem({content: item}) 
       if (item[0]) 
        +link(item[0]) 


block content 
    +list({items: [ 
     'list item 1', 
     'list item 2', 
     [{text: "Hi link"}], 
     'list item 4' 
    ]}) 

Answer 2

Ein Mixin kann kein Objekt in einem Array sein. Betrachten Sie Ihr Objekt Neuformatierung und nähern sich dem Problem wie dieses (vereinfachtes Konzept zur Kommunikation):

- 
    var myList = [ 
    {text: 'list item 1'}, 
    {text: 'list item 2', link: '#'}, 
    {text: 'list item 3'} 
    ]; 

mixin list(listObject) 
    ul 
    for each listItemObject in listObject 
     +listItem(listItemObject) 

mixin listItem(listItemObject) 
    li 
    if (listItemObject.link.length > 0) 
     a(href= listItemObject.link)= listItemObject.text 
    else 
     #{listItemObject.text}