Jade/Pug：別のmixinのパラメーター配列にmixinを使用する方法

Question

Jade/Pugのアトミックデザインパターンを使用して、リンクが含まれる単純なリストを作成しようとしています。

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

リスト項目：

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

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

リンク：

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 

そして、私のテンプレートでは、私が持っている

次

以下のアイテムの配列を受け入れるように私のリストのmixinです

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' 
    ]}) 

私はror：

しかし、私はその項目の配列の外のリンクを使用すればうまくいきます。私は間違って何をしていますか？

Answer 1

ああ、あなたは別のミックスインの引数としてジェイドでミックスインを渡すことはできません。大部分のフォーマットを維持したい場合：必要な機能を得るためには、複数のインスタンスでタイプ検出を使用し、引数を配列として渡す必要があります。

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

mixinは配列内のオブジェクトではありません。あなたのオブジェクトを再フォーマットして（コンセプトを伝えるために簡略化され）、このような問題に近づいて考えてみましょう：

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