从 Ember.js 中的数组绑定类答案

【问题标题】：Binding class from an array in Ember.js从 Ember.js 中的数组绑定类
【发布时间】：2015-09-11 09:51:46
【问题描述】：

我从 Ember.js 开始，感觉有点失落。我有一个这样的对象：

App.BRANDS = [
{
    brand:'Audi'
},{
    brand:'BMW'
},{
    brand:'Skoda'
}];

所以我正在尝试使用 {{#each}} 组件显示该对象中的所有元素，显示其中的文本并将相同的文本绑定为类名。所以我在路线中编码：

App.InsuranceAutoSelectBrandRoute =  App.Route.extend({
  model: function(){
    return App.BRANDS;
  }
});

模板中的这个：

<article>
  {{#each brand in model tagName='ul'}}
    <li class='item-space'>
      <span {{bind-attr class=':brand-auto classNameAuto'}}></span>
      {{brand.brand}}
    </li>
  {{/each}}
</article>

那么问题是每个品牌的名称，在我将其绑定为类属性之前，我必须将其小写...

App.InsuranceAutoSelectBrandController = Ember.Controller.extend({
  classNameAuto: function() {
    App.BRANDS.forEach(function(item, index){
      return item.brand.toLowerCase();
    });
  }.property()
});

如果在我返回值的同一点创建日志，它可以工作，但类 attr 没有显示。我想要什么：

<article>
  <li class='item-space'>
    <span class='brand-auto audi'}}></span>
      Audi
  </li>
  <li class='item-space'>
    <span class='brand-auto bmw'}}></span>
    BMW
  </li>
  <li class='item-space'>
    <span class='brand-auto skoda'}}></span>
    Skoda
  </li>
</article>

请原谅我的英语水平，谢谢

【问题讨论】：

您好，首先让我警告您，您正在使用已在 ember 2.0 中删除的不推荐使用的语法，并且您的模板包含损坏的代码、您使用的是什么版本的 ember 以及您是什么指南关注

标签： ember.js handlebars.js

【解决方案1】：

首先，正如@Kitler 所说， bind-attr 已被弃用。如果您使用的是 1.13.x 或更高版本，您可以只插入 class 作为任何其他变量，{{brand.brand}}。

其次，您的代码不正确，无法正常工作。做你想做的最简单的方法是通过助手。您需要创建一个帮助器lower-case 并以这种方式使用它：

<article>
  <ul>
    {{#each model as |brand|}}
      <li class='item-space'>
        <span class='brand-auto {{lower-case brand.brand}}'>{{brand.brand}}</span>         
      </li>
    {{/each}}
  </ul>
</article>

您可以从文档 (http://guides.emberjs.com/v1.13.0/templates/writing-helpers/) 中了解如何创建帮助程序。如果你使用 ember-cli，下面的代码应该可以工作：

//app/helpers/lower-case.js
import Ember from 'ember';

export default Ember.Handlebars.makeBoundHelper(function (str) {
  return str.toLowerCase();
});

【讨论】：