RactiveJS：如何在模板表达式中测试相等性？答案

【问题标题】：RactiveJS: how can I test equality in a template expression?RactiveJS：如何在模板表达式中测试相等性？
【发布时间】：2014-05-13 17:01:39
【问题描述】：

我正在使用 Ractive.JS 绑定：

var alertsBinding = new Ractive({
    el: '.alerts',
    template: alertsTemplate,
    data: {
        alerts: alerts,
        selectedAlertID: null
    }
});

模板使用template expression 来检测一个项目是否是当前选定的项目并相应地添加一个类：

<div class="alert {{ id === selectedAlertID ? 'selected' }}">
  ...
</div>

当一个项目被选中时，我运行：

alertsBinding.set({selectedAlertID: selectedAlert.id});

设置后，我可以看到条件始终为假，即使条件应该为真。我还通过添加以下内容进行了检查：

id{{ id}} selected{{ selectedAlertID}}

在警报中确认该项目已被实际选中。

但条件仍然为假，并且未设置类。

如何在模板表达式中测试相等性？

【问题讨论】：

到目前为止，在 dev 分支上，这会导致抛出解析错误：jsfiddle.net/rich_harris/EM52x

标签： javascript binding templating ractivejs

【解决方案1】：

表达式必须是合法的 JavaScript；在这种情况下，需要有替代方案和结果：

<div class="alert {{ id === selectedAlertID ? 'selected' : '' }}">
  ...
</div>

当解析器没有看到一个冒号后跟另一个表达式时，它会停止尝试解析三元表达式并回退到将其视为标准引用。如果解析器在这些情况下提供更多反馈可能会有所帮助 - 我有 opened an issue on GitHub。

你也可以这样做

<div class="alert {{# id===selectedAlertID }}selected{{/}}">
  ...
</div>

【讨论】：