Jade / Pug：如何在另一个 mixin 的参数数组中使用 mixin答案

【问题标题】：Jade / Pug: how to use a mixin in a parameter array of another mixinJade / Pug：如何在另一个 mixin 的参数数组中使用 mixin
【发布时间】：2016-05-27 16:06:09
【问题描述】：

我正在尝试在 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

在我的模板中，我有以下内容：

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

我收到一个错误：

link is not a function

但是，如果我使用该 items 数组之外的链接，它就可以正常工作。我做错了什么？

【问题讨论】：

旁注：翡翠不再叫翡翠，it's going to be pug now.
添加了哈巴狗。无法标记它，因为 pug 还不是标记，而且我的排名不够高，无法添加！

标签： node.js pug mixins

【解决方案1】：

唉，你不能在 Jade 中传递一个 mixin 作为另一个 mixin 的参数。如果您想在大部分情况下保留格式：为了获得您想要的功能，您必须在多个实例中使用类型检测并将您的参数作为数组传递。

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

【讨论】：

感谢您的解释和代码示例。我已经让它工作了。我确实希望您可以主要出于可读性原因使用该对象。我稍作修改以在block content 中使用.., {link: {text: 'Hi link', url: 'https://examp.le'}},，这意味着至少您可以看到发生了什么，并且还可以通过if (item['link']) 检测list.jade 中的链接

【解决方案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}

【讨论】：