Question

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

TypeError：无法读取属性＆＃39; getAttribute＆＃39;未定义的

- 这是我的index.hbs：

＆＃13;

   <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>

＆＃13;

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

＆＃13;

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");  
      }
      
    }
  }
});

＆＃13;

- 有谁知道出了什么问题？如果我没有使用bind-attr，它甚至不会显示表中实际显示的值。

更新：

＆＃13;

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"
      }];
  }
});

＆＃13;

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 helper？

1 个答案: