Ember.js不更新模型

Ember.js not updating model

本文关键字:模型 更新 js Ember      更新时间:2023-09-26

最终更新:Kalman Hazins为我指出了正确的方向,计算属性没有被调用,因为它没有在屏幕上呈现,所以"没有必要"重新计算它。我将在此处包含控制器的最终代码:

App.QuestionController = Ember.ObjectController.extend({
    isEditing : false,
    resetIsEditing : function() {
        this.set('isEditing', false);
    }.observes('model.id'),
    canEditQuestion : function() {
        return this.get('author.id') === App.currentUser;
    }.property('author.id')
}

更新:下面Raymond Liu提供了一个"足够好"的解决方案,它并没有真正回答"为什么会发生这种情况"这个问题,但它是我迄今为止最好的


我正在学习Ember.js,对这本书进行一些修改。在我的控制器中,我有一个绑定到模型的属性,但是当我更改此类模型时,该属性不会更新。

这是控制器:

App.QuestionController = Ember.ObjectController.extend({
    isEditing : false,
    canEditQuestion : function() {
        this.set('isEditing', false);
        return this.get('author.id') === App.currentUser;
    }.property('model')
});

这是模板:

<script type="text/x-handlebars" id="question">
    {{#if isEditing}}
        <!-- edit question form -->
    {{else}}
        <p id="question">{{question}}</p>
        {{#if canEditQuestion}}
            <a href="#" {{action "toggleEditQuestion"}}>Edit question</a>
        {{/if}}
    {{/if}}
</script>

请注意,如果我在{{#if isEditing}}之前移动{{else}}分支内容,它将按预期工作(但不是我想要的方式(。

也许question是嵌套路由的事实很重要:

App.Router.map(function() {
    this.resource('questions', function() {
        this.resource('question', { path : '/:question_id' });
    });
});

我想要的是,即使我已经在编辑问题,如果我更改模型,isEditing属性也应该返回到false并且问题表单不会显示。显然,如果我总是提出问题,我可以解决它,但这不是我想要的。我错过了什么?

编辑:我正在为questionuser模型添加代码:

App.Question = DS.Model.extend({
    title : DS.attr('string'),
    question : DS.attr('string'),
    date : DS.attr('date'),
    author : DS.belongsTo('user', { async : true }),
    answers : DS.hasMany('answer', { async : true }) 
});
App.User = DS.Model.extend({
    fullname : DS.attr('string'),
    email : DS.attr('string'),
    questions : DS.hasMany('question', { async : true })
});

App.currentUser属性在sign_in控制器中设置:

App.SignInController = Ember.Controller.extend({
    needs : [ 'application' ],
    actions : {
        signIn : function() {
            var email = this.get("email");
            var userToLogin = App.User.FIXTURES.findBy("email", email);
            if(userToLogin === void 0) {
                alert("Wrong email!");
                this.set("email", "");
            }
            else {
                localStorage.currentUser = userToLogin.id;
                App.set('currentUser', userToLogin.id);
            }
        }
    }
});

PS:我的应用程序的完整代码可在 https://github.com/goffreder/emberoverflow

PS2:我设法获得了我的应用程序的正常运行的jsFiddle。要重现,您必须使用"tom@dale.com"电子邮件登录。然后,如果您单击第一个答案,您应该会看到一个"编辑问题"链接,用于切换问题表单。现在,打开该表单后,如果您更改问题,该表单仍将可用,新问题作为内容,这是我想要避免的行为。

@goffredder和@Raymond Liu,canEditQuestion函数/属性不触发的原因如下。

在Ember.js中,(计算的(属性评估是"神奇的",但众所周知 - "魔术"可能很昂贵。因此,计算属性的值被缓存,因此"魔术"不必一直发生,除非某些内容发生变化,否则缓存的值不会被重新计算。不仅如此,如果属性未显示在屏幕上 - 为什么要重新计算它?请参阅此jsbin,以了解我在说什么。请注意lazyPropDep永远不会更新lazyDep因为属性永远不会显示在屏幕上。

现在,回到你的例子。 当您编辑问题时,canEditQuestion属性不会呈现到屏幕上(因为它位于 else 块中(。因此,永远不会调用将isEditing重置为 false 的 canEditQuestion 函数。

我认为您需要的是将重置逻辑放入观察器中,同时将其他逻辑保留在属性中,如下所示:

resetIsEditing : function() {
  this.set('isEditing', false);
}.observes('model.id'),
canEditQuestion : function() {
  return this.get('author.id') === App.currentUser;
}.property('model'),
这样,每次将新模型(

具有新模型 ID(加载到控制器中时(即使以前的模型处于编辑模式(,观察器代码也会触发重置isEditing属性以false

更新 :我误解了你的问题。您想在转到另一个问题时禁用表单,对吗?在question_routs.js文件中,添加以下内容:

App.QuestionRoute = Ember.Route.extend({
  actions: {
    didTransition: function() {
      this.controller.set('isEditing', false);
      return true; // Bubble the didTransition event
    }
  }
})

当您转换到另一个问题时,这些代码会将"isEdit"属性设置为 false。我注意到,如果 isEiting 属性设置为 true,当切换到另一个问题时,不会调用 canEditQuestion 函数/属性,我认为这就是需要解决的问题。我不知道为什么。

看起来

计算属性依赖于两个变量,即 author.idApp.CurrentUser,这两个变量未在依赖键列表中列出。相反,您仅将model列为依赖键。我不知道authormodel之间的关系是什么,但你应该列出计算你的属性所需的实际属性/变量。

您可以执行以下操作:

<script type="text/x-handlebars" id="question">
 {{#unless isEditing}}
    <p id="question">{{question}}</p>
    {{#if canEditQuestion}}
        <a href="#" {{action "toggleEditQuestion"}}>Edit question</a>
    {{/if}}
 {{else}}
    <!-- edit question form -->
 {{/unless}}
</script>