emberjs - 過濾器導航，綁定選定過濾器上的活動類

在我的一個模板中，我使用從項目（視頻）列表中提取的不同屬性（流派），並使用這些流派構建過濾器導航。emberjs - 過濾器導航，綁定選定過濾器上的活動類

我模板中的每個類型都使用它的值在我的控制器上調用一個動作。

剪斷控制器：

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

這基本上與您的{{linkto}}導航上燼能如何自動分配active相同。

來源

2013-11-20 kabal

很多我的模板，我決定將過濾器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); 
    }); 
}

} ）;

來源

2013-12-01 02:08:08 kabal

你可以使用一個計算的屬性是這樣的：

你的模板

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

來源

2013-11-21 11:33:28 DelphiLynx

emberjs - 過濾器導航，綁定選定過濾器上的活動類

回答

相關問題