觀察者未在Ember中被解僱

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

}); 

正如你所看到的，我有filterDesignation & 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" 

微調服務器上的名稱應該解決這個問題了。

其他問題（S）：

是filteredContent陣列，或所計算的屬性？您爆了你的計算性能上的init和一個空數組

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

或該更換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') 

此外你過濾在多個地方，這樣一個過濾器將完全炸開另一個過濾器。所以我剔除了每個下拉列表的觀察結果，並刪除了銷燬filteredContent數組的init。

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

BTW

如果你不希望它說明了什麼，直到他們已經過濾的，而不是設置過濾的內容爲空數組至少有一點，在init中，你可以在計算屬性filteredContent中這樣做（在過濾器之前）：

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

灰燼的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 
    ```