Ember.js将类添加到动作帮助器模板

Question

如何使用Ember单击项目的类别。我在表的元素上使用Handlebars操作来按属性排序。我想在要排序的属性中添加一个类，以便向用户显示正在排序的当前属性。我怎么能这样做？

我有一个如下所示的余烬控制器：

App.UsersController = Ember.ArrayController.extend
  title: 'Users'
  count: Ember.computed.alias 'length'
  sortProperties: ['username']
  actions:
    sort: (property) ->
      console.log property
      if @get('sortProperties')[0] is property
        @set('sortAscending', !@get 'sortAscending')
      else
        @set 'sortProperties', [property]
        @set('sortAscending', true)

控制器允许我单击表格中的标题对表格进行排序。 html如下所示：

<thead>
  <tr>
    <th>Action</th>
    <th class="sort" {{action sort 'last'}}>Last</th>
    <th class="sort" {{action sort 'first'}}>First</th>
    <th class="sort" {{action sort 'username'}}>Username</th>
    <th class="sort" {{action sort 'email'}}>Email</th>
  </tr>
</thead>

Answer 1

创建currentSort属性（可选）

首先，我在currentSort上创建了一个App.UsersController属性，清除了一些代码。我们稍后会用它。

App.UsersController = Ember.ArrayController.extend
  sortProperties: ['username']
  currentSortBinding: 'sortProperties.firstObject'

  actions:
    sort: (sort) ->
      if sort is @get('currentSort')
        @toggleProperty 'sortAscending'
      else
        @setProperties
          currentSort: sort
          sortAscending: true

为每个<th>

定义自定义视图

然后你会<th>为active-sort做{2}：

• 当视图的排序是当前的
时，有一个类click
• 在App.SortView = Ember.View.extend template: Ember.Handlebars.compile('{{view.sortName}}') tagName: 'th' sortName: null # (will be different for each <th> : `last`, `first`,..) classNameBindings: [ ':sort', 'isCurrent:active-sort' ] isCurrent: (-> @get('sortName') is @get('controller.currentSort') ).property('sortName', 'controller.currentSort') click: -> var newSort = @get('sortName'); @get('controller').send('sort', newSort); 视图
时更改控制器当前排序

看起来像这样：

<thead>
  <tr>
    {{view App.SortView sortName="default"}}
    {{view App.SortView sortName="price"}}
    {{view App.SortView sortName="alphabetical"}}
  </tr>
</thead>

我们to define a custom view，customized the view class names。

为每种排序插入自定义视图

这对handled click event on the view非常简单：

{{1}}

您可以测试所有这些insert views in templates

Answer 2

我不知道这是否是最好的解决方法，但你可能会有一些＆＃34;排序标志＆＃34;你可以绑定CSS。

在你的控制器中（＆＃34;经典＆＃34; javascript）：

sortedByLast : function() { return this.get("sortProperties")[0] === "last" }.property("sortProperties.@each")
// etc ...

在你的模板中：

<th {{bind-attr class=":sort sortedByLast:current-sort"}} {{action sort 'last'}}>Last</th>

因此sort类将始终打开，current-sort只有匹配其正确的标志才会出现。