Pug (Jade) mixin 和 if 语句

Question

好吧，我在名为 data:

的数组中有对象

[
 {
  title: 'Title',
  broadcast: true
 },
 {
  title: 'Title',
  broadcast: false
 }
]

在一个页面上，我只想显示带有 broadcast: true 的页面，并且我想为此使用 mixin 调用。我的混入：

mixin techs(condition)
- var data = trs.tech.data;
ul.techs
    each item in data
        if condition
            li
              .h2= item.title

我的 mixin 调用：

+techs('item.broadcast')

但是（当然）这个东西并没有像我想的那样工作。它显示数组中的所有对象。有什么方法可以在不将条件写入 mixin 的情况下获得我期望的结果吗？

Answer 1

我发现您的代码存在多个问题。你的 mixin 定义是 techs 但你正试图调用 tech。其次，mixin 声明后的缩进不正确。此外，数组应作为具有标识符的对象传递。

因此，考虑将您的 JSON 重组到

{
  "tempArrayName": [
    {
      "title": "Title1",
      "broadcast": true
    },
    {
      "title": "Title2",
      "broadcast": false
    }
  ]
}

而你的 JADE/PUG 可以重写为，

mixin techs
 - var data = tempArrayName;
 ul.techs
    each item in data
        if item.broadcast
            li
              .h2= item.title
+techs

其中 +techs 是可以在多个地方重复使用的 mixin 调用。它使用 broadcast 值检查条件（希望这是您要实现的）并打印，

<ul class="techs">
  <li>
    <div class="h2">Title1</div>
  </li>
</ul>

测试使用 - http://naltatis.github.io/jade-syntax-docs

希望对您有所帮助。

Answer 2

从我的角度来看，对于这个给定的问题，mixin 根本不应包含任何与其接收的数据相关的附加逻辑。相反，它应该是一个迭代列表的简单渲染方法。因此，在这种情况下，render 方法专门处理已经 filtered/sanitized/proven 个数据项的列表，作为此方法的唯一参数传递。

// running, js only, demo code

var techList = [{
  title: 'Title',
  broadcast: true
}, {
  title: 'Title',
  broadcast: false
}];


function isMarkedForBroadcast(type/*, idx, list*/) {
  return (type.broadcast === true);
}


var broadcastItemList = techList.filter(isMarkedForBroadcast);

console.log('techList : ', techList);
console.log('broadcastItemList : ', broadcastItemList);

.as-console-wrapper { max-height: 100%!important; top: 0; }

//- pug/view

mixin renderTechList(list)
    ul.techs
        each item in list
            li
                .h2= item.title

-
    function isMarkedForBroadcast(type/*, idx, list*/) {
        return (type.broadcast === true);
    }

+renderTechList(trs.tech.data.filter(isMarkedForBroadcast))

Pug (Jade) mixin 和 if 语句

Pug (Jade) mixin and if statement

mixins

pug