RactiveJS：如何在模板表達式中測試相等性？

Question

我正在使用Ractive.JS綁定：

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

模板使用模板表達式來檢測某項是否為當前選定的項，並相應地添加一個類：

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

當解析器看不到冒號后跟另一個表達式時，它將停止嘗試解析該三進制表達式，而退回到將其視為沼澤標准引用的方式。 如果解析器在這些情況下提供了更多反饋，可能會有所幫助-我在GitHub上發布了一個問題 。

另外，您也可以

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