javascript - RactiveJS:如何测试模板表达式中的相等性？

Question

我正在使用 Ractive.JS 绑定(bind):

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}}

在警报内确认确实选择了该项目。

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

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

Answer 1

表达式必须是合法的 JavaScript；在这种情况下，需要有一个替代方案以及一个结果:

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

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

作为替代方案，您也可以这样做

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