Ember.js不更新模型
Ember.js not updating model
最终更新: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
并且问题表单不会显示。显然,如果我总是提出问题,我可以解决它,但这不是我想要的。我错过了什么?
编辑:我正在为question
和user
模型添加代码:
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.id
和 App.CurrentUser
,这两个变量未在依赖键列表中列出。相反,您仅将model
列为依赖键。我不知道author
和model
之间的关系是什么,但你应该列出计算你的属性所需的实际属性/变量。
您可以执行以下操作:
<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>
- Angular没有根据模型更新我的选择元素
- 如何使 NgJsTree 应用模型更新
- 控制器内部的scope函数不根据视图中的ng模型更新值
- Angularjs模型更新延迟
- 模型更新时触发ng显示
- 在特定模型更新后,如何让keystoneJS运行函数
- 挖空JS未从视图模型更新
- 使用Spine.Model.Ajax,如何在模型更新时处理响应的JSON中的额外属性
- 模型更新后,AngularJS 视图未更新
- 角度函数在模型更新之前触发:邮政编码检查器
- 使用 AJAX 更新的模型更新 AngularJS 视图
- 角度指令内的回调在模型更新之前调用
- AngularJS 视图在模型更新后不会更新
- 带有硬编码选项的 AngularJS 多选不会在模型更新时更新
- 角度JS模型更新不起作用
- 角度视图未根据模型更新
- AngularJS-在控制器中使用模型导致模型更新
- Angularjs:当ng模型更新时,选择不更新
- 当使用Knockout's的foreach绑定,do事件会在视图模型更新时自动清理
- 通过ng模型更新不同的$scope对象属性