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>

注意content.filter()

中的第二个参数

如果我这样称呼：

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

然后返回的数组总是空的。

添加.valueOf()可以获得预期的输出。这看起来很麻烦且容易出错。

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

edit2：已更新为包含模板

edit3：添加了类型数组控制台日志

Answer 1

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

说过我会猜测{{action "filterGenre" genre}}没有传递正确的属性。我猜它应该是一个字符串，但它传递一个Object。这就是为什么当你致电valueOf()时它会产生预期的结果。 filterBy函数需要一个字符串，在这种情况下，JS解释器首先将它传递给toString()。

如果您可以发布调用操作的实际模板，或者为genreFilter的值提供一些日志输出，将会很有帮助。

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

1 个答案: