Pug(玉)混合和if语句

Well, I have objects in array named data:

我有一个名为data的数组对象

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

On one page I want to show only ones with broadcast: true and I want to use a mixin call for that. My mixin:

在一个页面上，我只想显示带有广播的:true，我想使用mixin调用。我的混合:

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

And my mixin call:

和我的mixin叫:

+techs('item.broadcast')

But (of course) this thing doesn't work as I want to. It shows all objects in array. Is there any way to get result I expect without writing condition into mixin?

但是(当然)这东西不能像我想的那样工作。它显示数组中的所有对象。有没有什么方法可以得到我期望的结果而不把条件写入mixin?

2 个解决方案

#1

From my point of view, regarding this given problem, the mixin should not at all contain any additional logic connected to the data it receives. It instead should be a straightforward render method that iterates a list. Thus, in this case, the render method exclusively processes a list of already filtered/sanitized/proven data items, passed as this method's sole argument.

在我看来，对于这个给定的问题，mixin根本不应该包含与它接收的数据相连接的任何附加逻辑。它应该是一个简单的呈现方法，迭代一个列表。因此，在本例中，呈现方法专门处理已过滤/消毒/已验证数据项的列表，作为该方法的唯一参数传递。

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

#2

I see multiple issues with your code. Your mixin definition is techs but you are trying to call tech. Secondly the indentation is incorrect after the mixin declaration. Also, the array should be passed as an object with an identifier.

我看到你的代码有很多问题。您的mixin定义是techs，但您正在尝试调用tech。第二，在mixin声明之后，缩进是错误的。此外，数组应该作为具有标识符的对象传递。

Therefore, consider restructuring your JSON onto,

因此，考虑将JSON重组为，

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

And your JADE/PUG could be rewritten as,

你的玉/哈巴狗可以重写为，

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

Where +techs is the mixin call which can be reused in multiple places. It checks for the condition usin broadcast value (hope that is what you are trying to achieve) and prints,

其中+techs是mixin调用，可以在多个地方重用。它检查usin广播值的条件(希望这是您试图实现的)和打印，

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

Tested using - http://naltatis.github.io/jade-syntax-docs

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

Hope this helps.

希望这个有帮助。