javascript - 您如何根据 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

将模板视为 View ，将助手视为 Controller 。然后在模板本身做装饰:

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