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

【问题标题】：emberjs - strange workaround for filtering based on controller propertyemberjs - 基于控制器属性进行过滤的奇怪解决方法
【发布时间】：2013-11-24 20:44:35
【问题描述】：

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

控制器：

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：添加流派数组控制台日志

【问题讨论】：

你能显示调用filterGenre动作的动作吗？
将模板添加到我的问题中
也请添加genres数组
添加了流派数组的控制台日志输出

标签： javascript ember.js

【解决方案1】：

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

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

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

【讨论】：

将模板添加到我的问题中