Why can't I change this emberjs model without an error?

Question

I'm writing an ember app that has this settings model that I'm using to bypass routing because I want a single url. However, I get this error:

Error: Cannot perform operations on a Metamorph that is not in the DOM.

when I change any of the data in the model. I'm relatively new to ember, but from what I read of what's out there, you should be able to change a model just fine. Here's my html file:

<script type="text/x-handlebars" data-template-name="index">    
<div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#"><img src="./img/MySpending.png"></a>
                <div class="nav-collapse">
                        <ul id="navWrapper" class="nav">
                   {{#if model.isIndex}}
                    {{partial "indexNav"}}
                   {{/if}}
                   {{#if model.isMonthly}}
                    {{partial "monthlyNav"}}
                   {{/if}}
                   {{#if model.isYearly}}
                    {{partial "yearlyNav"}}
                   {{/if}}
                </ul>
                </div>
            <div class='navbar_form pull-right'></div>
        </div>
        </div>
</div>
<div id="bodyWrapper" class="container" style="padding-top:60px;">
    {{#if model.isIndex}}
    {{partial "indexPage"}}
    {{/if}}
    {{#if model.isMonthly}}
    {{partial "monthlyPage"}}
    {{/if}}
    {{#if model.isYearly}}
    {{partial "yearlyPage"}}
    {{/if}}
</div>
{{outlet}}

And each partial works fine initially.

It's when I change it in the three regular functions in my app.js that I have a problem. Here's my app.js:

App = Ember.Application.create();

App.Router.map(function() {
   // put your routes here
});

App.settings=Ember.Object.extend({
  isIndex: true,
  isMonthly: false,
  isYearly: false
});

Settings=App.settings.create();

//App.SettingsController = Ember.ObjectController.extend(Settings); Not sure whether to put this in or not

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Settings;
  }
});

function goToMonthly(){
    Settings.set('isIndex',false);
    Settings.set('isMonthly',true);
    Settings.set('isYearly',false);
}
function goToYearly(){
    Settings.set('isIndex',false);
    Settings.set('isMonthly',false);
    Settings.set('isYearly',true);
}
function goToIndex(){
    Settings.set('isIndex',true);
    Settings.set('isMonthly',false);
    Settings.set('isYearly',false);
}

So I'm not sure where the error is but if anyone can help,it'd be extremely appreciated.

Answer 1

There's a fundamental error in your approach here. Your Route/Controller are meant to handle the model for you , so by declaring your model outside of these objects, you're making more work for yourself and leading yourself to potential trouble.

I'm not seeing where your "goTo" functions are being called (I assume they're inside the partials, but if they're in that HTML and I missed it, that's my bad). But here's how they should be referenced:

App.SettingsController = Ember.ObjectController.extend({
    actions:{
        goToMonthly:function(){
            this.set('isIndex', false);
            this.set('isMonthly', true);
            this.set('isYearly', false);
        },
        //Other functions go here
    }
});

Then within your html, call these actions using handlebars:

<a {{action 'goToMonthly'}}> Click this to run the action </a>

Answer 2

Which ember version are you using? I tried it with ember 1.2 and 1.3 and your example is working fine.