Display view based on controller value

by ud3323

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.3.js"></script>
<script type="text/x-handlebars">
{{#with App.businessController.business}}
    {{#view App.StateView someValue="test1"}}
      <p>Test 1</p>
    {{/view}}

    {{#view App.StateView someValue="test2"}}
      <p>Test 2</p>
    {{/view}}
    <hr>
    {{#view App.StateView someValue="test3"}}
        State: 3 hahaha
    {{/view}}
    <hr>
    {{#if state}}
        state has a value
    {{else}}
        state has NO value :(
    {{/if}}
{{/with}}
</script>

JavaScript

App = Ember.Application.create();

App.businessController = Ember.Object.create({
    business: Ember.Object.create({
        state: 'test1'
    })
});

App.StateView = Ember.View.extend({
    businessStateBinding: 'App.businessController.business.state',
    
    businessStateDidChange: function(){
        if (App.businessController.getPath('business.state') !== this.get('someValue')) {
            this.set('isVisible', false);
        } else {
            this.set('isVisible', true);
        }
    }.observes('businessState')
});