javascript - METEOR 更改选择标签颜色

Question

我有以下选择

 {{#each orders_db}}
      <tr>
        <td>{{item}}</td>
        <td>
         <select class="bootstrapselect orderstatus">
          <option data-content="<span class='label label-info'>{{status}}</span>">{{status}}</option>
                      <option disabled>--------</option>
  <option data-content="<span class='label label-primary'>Awaiting</span>">Awaiting</option>
  <option data-content="<span class='label label-info'>Taken</span>">Taken</option>
  <option data-content="<span class='label label-success'>Delivered</span>">Delivered</option>
  <option data-content="<span class='label label-warning'>Shipped</span>">Shipped</option>
  <option data-content="<span class='label label-danger'>Cancelled</span>">Cancelled</option>
          </select>
        </td>
        <td>{{client}}</td>
        <td>{{location}}</td>
        <td>{{responsible}}</td>
      </tr>
    {{/each}}

在 JS 中

"change .orderstatus": function(event, template){
console.log($( event.target ).val());

Meteor.call('updateOrder', this._id, $( event.target ).val());

},


orders_db: function(){
return Orders.find({}, {sort: {createdAt: -1}});
}

如何根据状态更改值？例如。已发货应有标签警告，已取消应有标签危险等。

Answer 1

您可以创建一个输入状态并返回标签的助手

//html
<option data-content="<span class='label label-info {{getLabel status}}'>{{status}}</span>">{{status}}</option>

//template js
const labels = {
  cancelled: "label-danger",
  shipped: "label-warning",
  ...
}
Template.templateName.helpers({
  'getLabel':function(status){
     return labels[status];
  }
}