Javascript 观察者在余烬中没有被解雇

我有一个非常奇怪的问题，我的应用程序中有两个观察者，但其中只有一个可以正常启动。我不知道为什么会这样

这是有问题的控制器：

App.TwodController = Ember.ArrayController.extend({
    //filteredContent : null,
    init : function() {
        this.set('filteredContent', []);
    },
    //sortProperties : ['firstname'],

    //sortAscending : true,
    selectedExperience : null,
    filterExperience : function() {
        var exp = this.get('selectedExperience.exp');
        var filtered = this.get('arrangedContent').filterProperty('experience', exp);
        this.set("filteredContent", filtered);
    }.observes('selectedExperience'),
    experience : [{
        exp : "1"
    }, {
        exp : "2"
    }, {
        exp : "3"
    }, {
        exp : "4"
    }, {
        exp : "5"
    }],
    selectedDesignation : null,
    filterDesignation : function() {
        var designation = this.get('selectedDesignation.designation');
        var filtered = this.get('arrangedContent').filterProperty('designation', designation);
        this.set("filteredContent", filtered);
    }.observes('selectedDesignation'),
    designations : [{
        designation : "Design",
        id : 1
    }, {
        designation : "Writer",
        id : 2
    }, {
        designation : "Script",
        id : 3
    }, {
        designation : "Storyboard",
        id : 4
    }, {
        designation : "Workbook",
        id : 5
    }],
    actions : {
        filterExperience : function() {
            var experience = this.get('selectedExperience.exp');
            var filtered = this.get('content').filterProperty('experience', experience);
            this.set("filteredContent", filtered);
        },
        refresh : function() {
            var refresh = this.get('content');
            this.set("filteredContent", refresh);
        }
    },
    filteredContent : function() {
        var searchText = this.get('searchText'), regex = new RegExp(searchText, 'i');

        return this.get('model').filter(function(item) {
            var fullname = item.firstname + item.lastname;
            return regex.test(fullname);
        });
    }.property('searchText', 'model')

});

如你所见，我有过滤设计和过滤经验。但只有filterExperience按预期工作，而不是filterDesignation

此外，以下是该控制器的HTML模板：

<script type="text/x-handlebars" id="twod">
    <div class="row">
        <div class="span4">
            <img src="/img/2DPipeline.jpg"/>
        </div>

        <div class="span4">
            <h4>2D Roles</h4>

            {{view Ember.Select
            contentBinding="designations"
            optionValuePath="content.id"
            optionLabelPath="content.designation"
            selectionBinding="selectedDesignation"
            prompt="Please Select a Role"}}
            {{view Ember.Select
            contentBinding="experience"
            optionValuePath="content.exp"
            optionLabelPath="content.exp"
            selectionBinding="selectedExperience"
            prompt="Please Select Experience"}}


            <br/>
            <!-- <button {{action 'filter'}}>Filter By Designation</button>
            <button {{action 'filterExperience'}}>Filter By Experience</button>
            <button {{action 'refresh'}}>Refresh</button> -->            </div>

        <div class="span3">
            <h4>People with Roles</h4>
            {{input type="text" value=searchText placeholder="Search"}}
            <div class="row">

                <div class="span2">
                    <ul>

                        {{#each item in filteredContent}}
                        <li>{{#link-to 'twoduser' item}}{{item.firstname}}&nbsp;{{item.lastname}} {{/link-to}}</li>

                        {{/each}}

                    </ul>
                </div>
                <div class="row">
                    <div class="span3">
                        {{outlet}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

二维角色
{{查看余烬。选择
contentBinding=“指定”
optionValuePath=“content.id”
optionLabelPath=“content.designation”
selectionBinding=“selectedDesignation”
prompt=“请选择一个角色”}
{{查看余烬。选择
contentBinding=“体验”
optionValuePath=“content.exp”
optionLabelPath=“content.exp”
selectionBinding=“selectedExperience”
prompt=“请选择体验”}


有角色的人
{{input type=“text”value=searchText占位符=“Search”}

{{#filteredContent中的每个项目}
{{{#链接到'twoduser'项目}{{item.firstname}{{item.lastname}}{{/link到}}
{{/每个}}

{{outlet}}

这是完整的

可能是什么问题

---

编辑：Twod模板中的搜索框不起作用。知道为什么吗？

观察员正在工作。您的JSON似乎包含额外的空白。每个记录的指定值在值的前面和后面都有一个空格

 designation: " Design "

过滤器正在查找

 designation: "Design"

修剪服务器上的名称应该可以解决这个问题

其他问题：

filteredContent是数组还是计算属性？您正在清除init上的computed属性，并用空数组替换filteredContent computed属性

 init : function() {
      this.set('filteredContent', []);
 },

  Verifies that a value is `null` or an empty string, empty array,
  or empty function.

  Constrains the rules on `Ember.isNone` by returning false for empty
  string and empty arrays.

    ```javascript
    Ember.isEmpty();                // true
    Ember.isEmpty(null);            // true
    Ember.isEmpty(undefined);       // true
    Ember.isEmpty('');              // true
    Ember.isEmpty([]);              // true
    Ember.isEmpty('Adam Hawkins');  // false
    Ember.isEmpty([0,1,2]);         // false
    ```

还是这个？

 filteredContent : function() {
    var searchText = this.get('searchText'), regex = new RegExp(searchText, 'i');

    return this.get('model').filter(function(item) {
        var fullname = item.firstname + item.lastname;
        return regex.test(fullname);
    });
 }.property('searchText', 'model')

此外，您在多个位置进行过滤，因此一个过滤器将完全炸掉另一个过滤器。因此，我删除了每个下拉列表的观察值，并删除了销毁filteredContent数组的init。

顺便说一句

如果您不想让它显示任何内容，直到他们过滤了至少一个内容，而不是在init中将过滤内容设置为空数组，您可以在computed属性filteredContent中这样做（在过滤之前）：

如果（！（hasDesignation | | hasExperience | | hasSearch））返回[]

余烬是空的

 init : function() {
      this.set('filteredContent', []);
 },

  Verifies that a value is `null` or an empty string, empty array,
  or empty function.

  Constrains the rules on `Ember.isNone` by returning false for empty
  string and empty arrays.

    ```javascript
    Ember.isEmpty();                // true
    Ember.isEmpty(null);            // true
    Ember.isEmpty(undefined);       // true
    Ember.isEmpty('');              // true
    Ember.isEmpty([]);              // true
    Ember.isEmpty('Adam Hawkins');  // false
    Ember.isEmpty([0,1,2]);         // false
    ```

---

该死的，从来没想到空白会给我带来这么多麻烦。不过，我还有一个问题，value=searchText的搜索框在'twod'模板中不起作用。哈，我觉得你在那里，空白在某个时间点上占了我们很多人的上风。我将解释上面的一些其他问题。还有一个问题，这行代码的目的是什么，

hassignation=！余烬。isEmpty（名称），

？它是否检查名称是否为空？遗憾的是，原始问题和此答案中链接的jsbin似乎已断开。