Javascript emberjs-基于控制器属性进行过滤的奇怪解决方法

我试图弄明白为什么直接对控制器的属性进行过滤并没有按预期工作

控制器：

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>

{{outlet}
{{{每种体裁}
{{/每个}}
{{{#每个filteredContent}
{{{#链接到'catchup/item'this}
{{{#如果缩略图URL}
{{/if}
{{ProgramName}}
{{副标题}
{{/linkTo}
{{/每个}

请注意

content.filter（）中的第二个参数

如果我这样称呼它：

content.filterBy（“GenreName”，this.get（“genreFilter”）；

那么返回的数组总是空的

添加
.valueOf（）
可以得到预期的输出。这看起来非常麻烦，而且容易出错

编辑：请注意，我使用的是
arrangedContent
，因为我有一些执行排序的剪切操作

edit2：更新为包含模板

edit3:添加了流派数组控制台日志过滤器内容
应该是
排列内容的计算属性。[]
，而不是
排列内容
。
排列内容
是一个数组，您需要告诉余烬列出数组更改（添加项，删除项）

话虽如此，我猜
{action“filterGenre”genre}
没有传递正确的属性。我猜它应该是一个字符串，但它传递了一个对象。这就是调用
valueOf（）时的原因
它产生预期的结果。
filterBy
函数需要一个字符串，在这种情况下，JS解释器首先通过
toString（）

如果您可以在调用操作的地方发布实际模板，或者为
genreFilter
的值提供一些日志输出，这将非常有用。您可以显示调用
filterGenre
操作的操作吗？将模板添加到我的问题中还请为genres arrayadd添加
genres
arrayadded控制台日志输出根据我的问题修改模板