Question

我有一个非常奇怪的问题，我在我的应用程序中有两个观察者，但只有一个正常发射。我不确定为什么会这样。

这是有问题的控制器：

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')

});

正如你所看到的，我有过滤器设计＆amp; filterExperience。但只有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>

这里也是完整的JSBin。

可能是什么问题？

修改：“Twod”模板中的搜索框不起作用。有什么想法吗？

Answer 1

观察员正在工作。您的JSON似乎包含其他空格。每条记录的指定值在值的正面和背面都有一个空格。

 designation: " Design "

过滤器正在寻找

 designation: "Design"

修改你在服务器上的名称应该解决这个问题。

其他问题：

filterContent是一个数组还是一个计算属性？你在init上爆破你的计算属性并用空数组替换filteredContent计算属性

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

还是这个？

 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')

此外，您要在多个位置进行过滤，因此一个过滤器将完全消除另一个过滤器。所以我删除了每个下拉列表的观察值，并删除了init破坏filteredContent数组。

 filteredContent : function() {
  var designation = this.get('selectedDesignation.designation'),
      hasDesignation = !Ember.isEmpty(designation),
      experience = this.get('selectedExperience.exp'),
      hasExperience = !Ember.isEmpty(experience),
      searchText = this.get('searchText'),
      hasSearch = !Ember.isEmpty(searchText),
      regex = hasSearch ? new RegExp(searchText, 'i') : undefined;


    return this.get('model').filter(function(item) {
      var fullname = Em.get(item,'firstname') + Em.get(item,'lastname');

      return (!hasDesignation || Em.get(item, 'designation') === designation) &&
             (!hasExperience || Em.get(item, 'experience') === experience) &&
             (!hasSearch || regex.test(fullname));
    });
}.property('searchText', 'model', 'selectedExperience.exp', 'selectedDesignation.designation')

http://jsbin.com/aHiVIwU/27/edit

<强>顺便说一句

如果你不希望它显示任何东西，直到他们至少过滤了一件事，而不是在init中将过滤的内容设置为空数组，你会在计算属性，filteredContent中这样做，就像这样（在过滤器之前）：

if（！（hasDesignation || hasExperience || hasSearch））return [];

Ember isEmpty

  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
    ```

观察员没有被Ember解雇

1 个答案: