为什么我不能在没有错误的情况下更改这个emberjs模型?

时间:2014-02-12 04:05:20

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

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

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

当我更改模型中的任何数据时。我比较陌生,但从我读到的内容来看,你应该能够很好地改变一个模型。这是我的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);
}

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

2 个答案:

答案 0 :(得分:1)

这里的方法存在根本性错误。您的路径/控制器旨在为您处理模型,因此通过在这些对象之外声明您的模型,您将为自己做更多的工作并导致自己陷入潜在的麻烦。

我没有看到你的“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>

答案 1 :(得分:0)

您使用的是哪个版本的ember?我用ember 1.2和1.3试过它,你的例子工作正常。