Pug - 带有条件的.mixin .json对象

Question

Pug - 带有条件的.mixin .json对象

4

我将尝试使用条件语句（如果外部的.json文件中存在一个对象），但是Pug无法识别它。

因此，我的json文件大致如下：

{
  "portfolioItems": [object1: {
      objectA { ...
      },
      objectB { ...
      },
      "buttons": [{
        key: value
      }, {
        key: value
      }]
    }, object2: {
      objectA { ...
      },
      objectB { ...
      }], object3: {
      objectA { ...
      },
      objectB { ...
      }
    }
  }
}

基本上，我需要为“对象1”（按钮）创建一个额外的div。

mixin portfolio(css, image, title, description)
    div(class= "item " + css)
        .wrap-img
            img(src= assets + "img/home/" + image)&attributes(attributes)
        .wrap-text
            h3= title
            p= description
            if home.portfolioItems.buttons
                div.buttons
                    each val in home.portfolioItems.buttons
                        a(href= val.link, target="_blank")
                            img(class= val.className, src= assets + "img/stores/" + val.image)

div.portfolio--items
            - var projects = home.portfolioItems;
            each item in projects
                +portfolio(item.class, item.image, item.title[lang], item.description[lang])(alt= item.title[lang], title=item.title[lang])

Pug可以访问“home.portfolioItems.buttons”，但它不能在mixin内部进行条件判断吗？因为我可以在外部运行它（但我不想这样做）。

提前致谢。抱歉英语有误。;)

- João Saro

你在哪里/如何定义了'home'对象？ - Sean

@sean home 是我在 pug/js 中定义的一个变量，用于存储上面的 JSON。基本上，它是由 gulp 处理 pug 任务的“locals”快捷方式。请参见以下示例链接（相同流程）：https://github.com/joaosaro/staro-webkit/blob/master/src/pug/0-setup/variables.pug、https://github.com/joaosaro/staro-webkit/blob/master/gulpfile.js、https://github.com/joaosaro/staro-webkit/blob/master/src/data/home.json。 - João Saro

这个问题中提供的JSON中，那些方括号是否放置正确？ - Sean

@sean 我想是这样的。你理解这个问题吗？基本上，我可以通过pug访问所有对象，除了在mixins内部。所以我想问题的重点应该在pug内部。 - João Saro

你尝试过将JSON对象作为参数传递到mixin中吗？ - Sean

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Graham · Accepted Answer

混合器有自己的作用域，因此您需要将它们作为对象传递。我建议使用单个选项对象，这比跟踪不同参数要容易得多，而且无需考虑顺序，也更易读。

请注意，您可以调用混合器并跨多行进行定义。

+portfolio({
  "css": "css",
  "image": "image",
  "title": "title",
  "description": "description",
  "items": portfolioItems
})

这是 mixin 的样式代码：

mixin portfolio(options)
  div(class= "item " + options.css)
    .wrap-img
      img(src= assets + "img/home/" + options.image)&attributes(options.attributes)
    .wrap-text
      h3= options.title
      p= options.description
      if options.items.buttons
        div.buttons
          each val in options.items.buttons
            a(href= val.link, target="_blank")
              img(class= val.className, src= assets + "img/stores/" + val.image)

您可以避免传递所有项目，并传递按钮或空数组，如果 "buttons" 属性不存在于 portfolioItems 中：

+portfolio({
  "css": "css",
  "image": "image",
  "title": "title",
  "description": "description",
  "buttons": portfolioItems.buttons || []
})

这将避免条件测试的需要，因为在mixin中您至少保证了一个空数组：

mixin portfolio(options)
  div(class= "item " + options.css)
    .wrap-img
      img(src= assets + "img/home/" + options.image)&attributes(options.attributes)
    .wrap-text
      h3= options.title
      p= options.description
      div.buttons
        each val in options.buttons
          a(href= val.link, target="_blank")
            img(class= val.className, src= assets + "img/stores/" + val.image)