如何根據來自Meteor中的幫助者的數據應用動態樣式？

Question

我似乎經常遇到這個問題...我有一個Web UI元素，需要根據一些基礎數據進行不同樣式的設置。 整個UI元素的數據是通過這樣的幫助器填充的：

Template.foo.helpers({
    info: function() {
        return Session.get('data');
    }
});

數據結構如下所示：

{
    invoicePaid: true,
    invoiceAmount: 100
    status: 'complete'
}

如果我希望對這些數據進行樣式設置，則可以這樣做：

Template.foo.helpers({
    info: function() {
        var result = Session.get('data');
        if (result.invoicePaid) {
            result.invoicePaidStyle = 'primary';
        } else if {
            result.invoicePaidStyle = 'danger';
        }
        etc.....
        return result;
    }
});

顯然，在模板中，我在班級列表中有{{invoicePaidStyle}} 。 盡管這有點笨拙……是否有更好的方法來裝飾從Meteor中的助手返回到模板的數據？

Answer 1

將模板視為視圖，將助手視為控制器。 然后只需在模板本身中進行裝飾即可：

<template name="foo">
  <div class="{{#if info.invoicePaid}}primary{{else}}danger{{/if}}">
    blah blah
  </div>
</template>

Answer 2

您可以嘗試這樣。

Template.foo.helpers({
    info: function() {
      return Session.get('data');
    },
    invoicePaidStyle: function (invoicePaid) {
        return invoicePaid ? 'primary' : 'danger';       
    }
});

然后在您的HTML中執行以下操作。

{{invoicePaidStyle info.invoicePaid}}

我沒有測試過，但是我通常會做類似的事情。