Uncooperative {{#if}}

service-selector.hbs

<div class='service-selector'>
    {{input value=service focus-out="lostFocus"}}
    {{#if showMatches}}
        <ul class='matches'>
        {{#each matchedServices}}
            <li>{{name}}</li>
        {{/each}}
        </ul>
    {{/if}}
</div>

service-selector.js

export default Ember.Component.extend({
    showMatches: false,

    inputMatches: function(input, checked) {
        input = input.toLowerCase();
        checked = checked.toLowerCase();

        if (checked.indexOf(input) != -1) {
            return true;
        } else {
            return false;
        }
    },

    matchedServices: function() {
        var input = this.get('service')
        if (input) {
            var _this = this;
            return this.get('services').filter(function(item, index, enumerable) {
                var isMatch = _this.inputMatches(input, item.get('name'));

                if (isMatch) {
                    _this.set('showMatches', true);
                    console.log('here');
                }

                return isMatch;
            });
        } else {
            return Ember.makeArray();
        }
    }.property('service'),

    actions: {
        lostFocus: function(event) {
            this.set('showMatches', false);
        }
    }
});