Question

在我的一个模板中，我使用从项目（视频）列表中提取的不同属性（流派），并使用这些类型来构建过滤器导航。

我模板中的每个类型都会在我的控制器上调用一个带有值的动作。

剪断控制器：

var VideoListController = Em.ArrayController.extend({

  genreFilter: "",

  actions: {

    filterByGenre: function(genre) {
        this.set("genreFilter", genre);
    }
  },

  genres: function() {
    var genres = this.get('content').map(function(video) {
        return video.get("genre");;
    }).filter(function(genre, index, arr) {
        return arr.indexOf(genre) == index;
    });
    return genres;
  }.property("content"),

  filteredContent: function() {
    var content = this.get("arrangedContent");
    if (!Ember.isEmpty(this.get("genreFilter"))) {
        return content.filterBy("genre", this.get("genreFilter").valueOf());
    } else {
        return content;
    }
  }.property("arrangedContent.[]", "genreFilter"),

});

剪切模板：

<ul>
    <li><a href="#" {{action "filterByGenre"}}>ALL</a></li>
    {{#each genres}}
      <li class="divider"></li>
      <li><a href="#" {{action "filterByGenre" this}}>{{this}}</a></li>
    {{/each}}
</ul>

我想要做的是将active类放在与控制器genreFilter对应的过滤器导航项上。即

如果genreFilter =''，则ALL将拥有active类。

如果genreFilter ='喜剧'，则comedy会有active类。

这与ember能够在active导航中自动分配{{linkto}}的方式完全相同。

Answer 1

你可以使用这样的计算属性：

您的模板

<ul>
    <li><a href="#" {{action "filterByGenre"}}>ALL</a></li>
    {{#each genres}}
      <li class="divider"></li>
      <li {{#if activeGenre}} class=activeGenre>{{/if}} ><a href="#" {{action "filterByGenre" this}}{{this}}</a></li>
    {{/each}}
</ul>

您的计算属性（伪代码）

activeGenre: function() {
        // do your logic here
        return content;
    }.property('genreFilter')

Answer 2

由于我需要在很多模板中进行过滤，因此我决定将过滤器UI拆分为视图。该视图比使用jQuery选择器应用活动样式

父模板：

{{view "filters" contentBinding="filters" appliedFilterBinding="filterValue"}}

过滤模板：

<div class="">
<ul>
    <li><a href="#" class="filter-item" data-id="all" {{action "filter" ""}}>ALL</a></li>
    {{#each view.content}}
    <li class="divider"></li>
    <li><a href="#" class="filter-item" {{bind-attr data-id=this}} {{action "filter" this}}>{{this}}</a></li>
    {{/each}}

</ul>

过滤视图：

var FiltersView = Ember.View.extend({

templateName: 'filters',

_updateAppliedFilterUi: function() {
    this.updateAppliedFilterUi(this);
}.observes('appliedFilter'),

updateAppliedFilterUi: function(context) {
    context.$('.filter-item').removeClass('active');

    var appliedFilter = context.get("appliedFilter");
    if (Ember.isEmpty(appliedFilter)) {
        appliedFilter = "all";
    }
    var filterElementSelector = '.filter-item[data-id="' + appliedFilter + '"]';
    context.$(filterElementSelector).addClass('active');
},

didInsertElement: function() {
    var self = this;
    Ember.run.schedule('afterRender',function(){
        self.updateAppliedFilterUi(self);
    });
}

}）;

emberjs - 过滤导航，在选定的过滤器上绑定活动类

2 个答案: