javascript - emberjs - コントローラーのプロパティに基づくフィルタリングの奇妙な回避策

Question

コントローラのプロパティを直接フィルタリングしても期待どおりに機能しない理由を理解しようとしています。

コントローラ：

var VideoIndexController = Em.ArrayController.extend({

  genreFilter: "",
  actions: {

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

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

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

});

ジャンルの console.log:

["Youth/Children", "Movies", "Actuality/Information", "Series", "Shows", "Sport", nextObject: function, firstObject: undefined, lastObject: undefined, contains: function, getEach: function…]
0: "Youth/Children"
1: "Movies"
2: "Actuality/Information"
3: "Series"
4: "Shows"
5: "Sport"
__ember1384338760148_meta: Meta
_super: undefined
length: 6
__proto__: Array[0]

テンプレート：

{{outlet}}

<a href="" {{action "filterGenre"}}>All</a>
{{#each genres}}
<a href="" {{action "filterGenre" this}}>{{this}}</a>
{{/each}}

<a href="" {{action "sortAZ"}}>A-Z</a>
<a href="" {{action "sortZA"}}>Z-A</a>
<a href="" {{action "sortSuggested"}}>Suggested</a>

<section >
{{#each filteredContent}}
    {{#linkTo 'catchup/item' this}}
    <div class="catchup-list-item">
        {{#if thumbnailUrl}}
            <div>
                <img {{bindAttr src="thumbnailUrl"}} />
            </div>
        {{/if}}
        <div {{bindAttr class=":title validDownloadUrl::invalid"}}>
            <div>{{ProgramName}}</div>
            <div>{{subTitle}}</div>
        </div>
    </div>
    {{/linkTo}}
{{/each}
</section>

の2番目のパラメーターに注意してくださいcontent.filter()

これを次のように呼び出すと:

content.filterBy("GenreName", this.get("genreFilter"));

返される配列は常に空です。

追加する.valueOf()と、期待される出力が得られます。これはかなり面倒で、エラーが発生しやすいようです。

編集: を使用していることに注意してください。arrangedContent並べ替えを実行する一部のアクションが省略されているためです。

edit2: テンプレートを含めるように更新

edit3: ジャンル配列のコンソール ログを追加しました