0

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

控制器：

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>

注意第二个参数content.filter()

如果我这样称呼它：

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

那么返回的数组总是空的。

添加.valueOf()给了我预期的输出。这看起来非常麻烦且容易出错。

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

edit2：更新以包含模板

edit3：添加流派数组控制台日志

4

1 回答 1

1

filteredContent应该是 的计算属性，arrangedContent.[]而不是arrangedContent。这arrangedContent是一个数组，您需要告诉 Ember 列出数组更改（添加的项目，删除的项目）。

话虽如此，我猜这{{action "filterGenre" genre}}并没有传递正确的属性。我猜它应该是一个字符串，但它传递了一个对象。这就是为什么当你调用valueOf()它时会产生预期的结果。该filterBy函数需要一个字符串，在这种情况下，JS 解释器首先传递它toString()。

如果您可以发布调用操作的实际模板，或者为genreFilter.

于 2013-11-12T19:46:28.587 回答