Meteor Blaze To Do App 已检查条件答案

【问题标题】：Meteor Blaze To Do App checked conditionMeteor Blaze To Do App 已检查条件
【发布时间】：2016-11-06 15:34:47
【问题描述】：

（流星超级新手）

我已经阅读了流星待办事项应用程序教程，并在 checking off and deleting tasks part 上说

如果您在添加上述所有代码后尝试检查某些任务，您会看到已检查的任务有一条线穿过它们。这是通过以下 sn-p 启用的：

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

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

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

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

【问题讨论】：

这就像if else 语句，但在template 中工作。您可以将它用于任何 html 元素。例如，<img src={{#if bigImage}} "/soucre/to/big/image.jpg" {{else}} "/source/to/small/image.jpg" {{/if}} /> 目前模板中的条件语句只能检查真值。开箱即用不支持其他运算符。但你真正想做的是什么？

标签： meteor meteor-blaze

【解决方案1】：

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

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

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

【讨论】：

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

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

【讨论】：