流星更改選擇標簽的顏色

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

您可以創建一個輸入status並返回標簽的助手

//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];
  }
}