为什么我不能更改这个 emberjs 模型而不会出错？答案

【问题标题】：Why can't I change this emberjs model without an error?为什么我不能更改这个 emberjs 模型而不会出错？
【发布时间】：2014-02-12 04:05:20
【问题描述】：

我正在编写一个具有此设置模型的 ember 应用程序，我用它来绕过路由，因为我想要一个 url。但是，我收到此错误：

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

当我更改模型中的任何数据时。我对 ember 比较陌生，但从我读到的内容来看，你应该能够很好地更改模型。这是我的 html 文件：

<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}}

每个部分最初都可以正常工作。

当我在 app.js 的三个常规函数中更改它时，我遇到了问题。这是我的 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);
}

所以我不确定错误在哪里，但如果有人可以提供帮助，将不胜感激。

【问题讨论】：

标签： javascript html model-view-controller ember.js handlebars.js

【解决方案1】：

您的方法存在根本错误。您的 Route/Controller 旨在为您处理模型，因此通过在这些对象之外声明您的模型，您正在为自己做更多的工作并给自己带来潜在的麻烦。

我没有看到你的“goTo”函数在哪里被调用（我假设它们在部分内部，但如果它们在那个 HTML 中并且我错过了它，那是我的错）。但以下是它们的引用方式：

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

然后在您的 html 中，使用把手调用这些操作：

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

【讨论】：

【解决方案2】：

您使用的是哪个 ember 版本？我用 ember 1.2 和 1.3 试过了，你的例子运行良好。

【讨论】：