在 Ember.js 中使用什么代替 bind-attr 助手？

Question

当我想在简单的 table 数据参数 () 上使用 bind-attr 助手时。要更改该列的颜色，它会在控制台上写入错误：

TypeError: 无法读取未定义的属性 'getAttribute'

-这是我的 index.hbs:

   <table id="t01">
          <tr>
            <th>Company Name</th>
            <th>Headquarters</th> 
            <th>revenue</th>
          </tr>
          {{#each model as |index|}}
            <tr>
       <td>  {{index.name}} </td>
       <td {{bind-attr class="className"}}>          {{index.headquarters}} </td>
       <td>  {{index.revenue}} </td>
            </tr>
          {{/each}}
    </table>
    <button {{action "toggleColor"}}> Change color </button>

-这是我的 index.js 控制器：

import Ember from 'ember';


export default Ember.Controller.extend({
  className:"red",
  actions:{
    toggleColor: function(){
      if(this.get("className") == "red"){
        this.set("className","blue");  
      }else{
        this.set("className","red");  
      }
      
    }
  }
});

-有人知道哪里出了问题吗？它甚至不显示 table 中的值，如果我不使用 bind-attr，这些值将实际显示。

更新：

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return [{
      "name" : "Google",
      "headquarters": "Mountain View, California, United States of America",
      "revenue":"59825000000"
      },{
        "name" : "Facebook",
        "headquarters":"Menlo Park, California,United States of America",
        "revenue":"7870000000"
      },{
        "name" : "twitter",
        "revenue": "664000000",
        "headquarters":"San Francisco, California, United States of America"
      }];
  }
});

enter image description here

Answer 1

您也可以直接将属性分配给 class 属性。你不需要使用 bind-attr.

对于<td class={{classNameProperty}}>，如果classNameProperty是red那么你会得到<td class="red">。

对于<td calss={{if isActive 'form-control active' 'form-control'}}，
如果 isActive 是真值那么你会得到 <td class="form-control active"> 如果它是假那么你会得到 <td class="form-control">.

参考：
https://emberjs.com/deprecations/v1.x/#toc_bind-attr

在 Ember.js 中使用什么代替 bind-attr 助手？

What to use instead of bind-attr helper in Ember.js?

javascript

jquery

ember.js