非常に奇妙な問題があります。アプリに 2 つのオブザーバーがありますが、適切に起動するのはそのうちの 1 つだけです。なぜこれが起こっているのかわかりません。
問題のコントローラーは次のとおりです。
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 があります。ただし、filterDesignation ではなく、filterExperience のみが期待どおりに機能します。
さらに、そのコントローラーの 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}} {{item.lastname}} {{/link-to}}</li>
{{/each}}
</ul>
</div>
<div class="row">
<div class="span3">
{{outlet}}
</div>
</div>
</div>
</div>
</div>
</script>
完全なJSBinもここにあります。
問題は何ですか?
編集: "Twod" テンプレートの検索ボックスが機能しません。理由はありますか?