Question

（流星的超级新手）

我已经浏览了meteor todo app教程和checking off and deleting tasks part它说

如果在添加上述所有代码后尝试检查某些任务，您会看到已检查的任务有一行通过它们。这由以下代码段启用：

<li class="{{#if checked}}checked{{/if}}">

使用此代码，如果任务的checked属性为true，则选中该选项 class被添加到我们的列表项中。使用这个类，我们可以做我们的CSS中的检查任务看起来不同。

有没有办法让这个适用于不同的标签，而不是列表？所以基本上说它

使用此代码，如果任务的checked属性为true，则 updatedstyle class已添加到我们的 img标记中。使用这个类，我们可以做我们的CSS中的检查任务使图像看起来不同。

Answer 1

您可以将{{#if}}放在模板中的任何位置，而不仅仅放在列表项中。如果我理解你的具体问题：

<li>Some item
  <img class="{{#if checked}}updatedstyle{{/if}}" src="/myImg.png">
</li>

根据@blueren，{{#if}}的参数被评估为 truthy 或 falsy 值。它可以是当前数据上下文中的键（即this.checked），也可以由助手返回。

Answer 2

如果您希望在模板中将类反应绑定到html标记，则可以这样做：

模板代码：

<template name="MyTemplate">
  <img src="my/img/path.jpg" class={{checked.img}}/>

  <ul>
    <li class={{checked.li}}>My List Entry</li>
  </ul>
</template>

帮助代码：

Template.MyTemplate.helpers({
  checked() {
    let liClass = '';
    let imgClass = '';
    //your checked condition
    if(document.getElementById('myCheckBox').checked) {
      let liClass = 'checked';
      let imgClass = 'updatedstyle';
    }
    return {
      li: liClass,
      img: imgClass
    };
  }
});

这样，您可以将具有不同名称的多个类绑定到选中的输入值。

Meteor Blaze待办事项检查条件

2 个答案: