0

非常に奇妙な問題があります。アプリに 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}}&nbsp;{{item.lastname}} {{/link-to}}</li>

                        {{/each}}

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

完全なJSBinもここにあります。

問題は何ですか?

編集: "Twod" テンプレートの検索ボックスが機能しません。理由はありますか?

4

1 に答える 1