EmberJS：bootstrap模态拒绝重新打开由于记录未正确删除？ [英] EmberJS: bootstrap modal refuses to re-open due to record not being correctly deleted?
问题描述
目标：
我真正想在这里完成的事情是了解如何干练地使用模型记录。在这种特殊情况下，这些记录是一次性。如果模式在没有保存的情况下关闭，那么它们意图从内存中清除...一旦记录被保存到服务器，也不需要保留客户端的重新记录。
说明：
我创建了一个转换为付款路由的按钮操作， Bootstrap模式。
此路由创建一个付款记录，并提取可应用付款的可用债务列表。
App.PaymentRoute = Ember.Route.extend（{
model：function（）{
console.log（'（Router：模型钩）--------------------）'）;
return this.store.createRecord（'payment'）;
}，
afterModel：function（）{
console.log（'（Router：AfterModel Hook）------------------- - ）'）;
var route = this;
return Ember.RSVP.hash（{
debt_list：this.store.find（'debt'，{account_id：36，page_size：100，page_number：1}）
}） （function（hash）{
route.setProperties（{
account_id：36，
debt_list：hash.debt_list
}）;
}）;
}，
setupController：function（controller，model）{
console.log（'（Router：SetupController Hook）---------------- ----）'）;
this._super（controller，model）;
controller.setProperties（{
account_id：this.get（'account_id'），
debt_list：this.get（'debt_list'）
}）;
}，
}）;
关闭模态应该删除当前记录并转换回索引...
actions：{
removeModal：function（）{
this.currentModel.deleteRecord（）;
this.transitionTo（'index'）;
返回true;
}
}
当第二次点击付款按钮时，应该创建一个新的支付记录...但是发生错误，因为以前的记录尚未正确清除？
我已成功地重新创建了这个 JSBin
我没有创建和删除记录正确？
侧注：
我在我所有的路由和控制器方法上设置了 console.log（） ...我注意到 setupController 不在第二次打开的尝试中触发....也是我的控制器cp和观察者在初始化过程中触发多次...我不知道这是否有助于该问题？
我不认为你真的要删除记录。您想要做的是回滚任何更改，然后卸载它。我会在您的 willTransition 中挂钩路线，所以无论你如何离开路线，模型将被卸载。
代码：
willTransition：function（transition）{
var model = this.currentModel;
var debt_list = get（this，'debt_list'）;
var store = this.store;
//在视图完成后处理模型
Ember.run.once（function（）{
if（model）{
model.rollback（） ;
store.unloadRecord（model）;
}
if（debt_list）{
debt_list.forEach（function（debt）{
debt.rollback（）;
store.unloadRecord（债务）;
}）;
}
}
}
更新：重要的是从ember运行循环中卸载记录，以便在抓取模型之前将绑定到这些记录的任何视图拆除这就是为什么在 Ember.run.once（）中执行模型处理。
另一个观察是，您应该可以使用回复您的。所以把它放在一起你的路由应该看起来像下面这样：模型钩子中的 debt_list 请求.hash
var get = Ember.get，set = Ember.set;
App.PaymentRoute = Ember.Route.extend（{
model：function（params，transition，queryParams）{
return Ember.RSVP.hash（{
内容：this.store.createRecord（'payment'），
debt_list：this.store.find（'debt'，{account_id：36，page_size：100，page_number：1}）
}）;
}，
setupController：function（controller，hash）{
if（controller&& hash）{
controller.setProperties（hash）;
set（controller，'account_id'，36）;
}
}，
actions：{
willTransition：function（transition）{
var hash = this.currentModel;
var store = this.store;
//告诉控制器重置/清理 - 您应该设置任何
//模型
this.controller.reset（）;
if（hash）相关属性即'content'/'model'和'debt_list'
// to null /
//处理模型r视图已经定稿
Ember.run.once（function（）{
hash.content.rollback（）;
store.unloadRecord（hash.content）;
hash.debt_list.forEach（function（debt）{
debt.rollback（）;
store.unloadRecord（debt）;
}）;
}）;
}
}
}
}）;我已经更新了你的JSBin 这里，所以它的工作完美，模型从商店正确删除。
The Goal:
The thing that I am really trying to accomplish here is gain an understanding how to work with model records cleanly. In this particular case, these records are kind of "one-offs". If the modal is closed without saving, then they are meant to be cleared from memory... and once a record is saved to the server there is also no need to keep the re record stored client side.
Description:
I created a button action that transitions into a "payment" route, which renders inside a Bootstrap modal.
This route creates a "payment" record and also pulls a list of available "debts" the payment can be applied to.
App.PaymentRoute = Ember.Route.extend({
model: function() {
console.log('( Router: Model Hook )--------------------)');
return this.store.createRecord('payment');
},
afterModel: function() {
console.log('( Router: AfterModel Hook )--------------------)');
var route = this;
return Ember.RSVP.hash({
debt_list: this.store.find('debt', { account_id: 36, page_size: 100, page_number: 1 })
}).then(function(hash) {
route.setProperties({
account_id: 36,
debt_list: hash.debt_list
});
});
},
setupController: function(controller, model) {
console.log('( Router: SetupController Hook )--------------------)');
this._super(controller, model);
controller.setProperties({
account_id: this.get('account_id'),
debt_list: this.get('debt_list')
});
},
});
Closing the modal should delete the current record and transition back to index...
actions: {
removeModal: function() {
this.currentModel.deleteRecord();
this.transitionTo('index');
return true;
}
}
when payment button is clicked a second time, it "should" create a new payment record... but instead an error occurs, because the previous record has not been correctly cleared?
I successfully recreated the issue in this JSBin
Am i not creating and deleting records correctly?
Side Note:
I have set console.log() on all my route and controller methods... I noticed that setupController does not fire on the second open attempt.... also my controller cp's and observers are triggering multiple times during the initialization proces... i dont know if that is contributing to the problem or not?
解决方案 I don't think you actually want to 'delete' the record. What you want to do is rollback any changes to it and then unload it. I would do this in your willTransition hook on the route so no-matter how you leave the route, the model will be unloaded.
Code:
willTransition: function(transition) {
var model = this.currentModel;
var debt_list = get(this, 'debt_list');
var store = this.store;
// dispose of models after views have been finalised
Ember.run.once(function() {
if (model) {
model.rollback();
store.unloadRecord(model);
}
if (debt_list) {
debt_list.forEach(function(debt) {
debt.rollback();
store.unloadRecord(debt);
});
}
}
}
UPDATE: It is important to unload records from the ember run-loop to give any views bound to those records a chance to be torn down before ripping models out from under them. That is why the model disposing is performed within Ember.run.once().
Another observation is that you should be able kick off the debt_list request in your model hook using RSVP.hash. So putting it all together your route should look something like the following:
var get = Ember.get, set = Ember.set;
App.PaymentRoute = Ember.Route.extend({
model: function(params, transition, queryParams) {
return Ember.RSVP.hash({
content: this.store.createRecord('payment'),
debt_list: this.store.find('debt', { account_id: 36, page_size: 100, page_number: 1 })
});
},
setupController: function(controller, hash) {
if (controller && hash) {
controller.setProperties(hash);
set(controller, 'account_id', 36);
}
},
actions: {
willTransition: function(transition) {
var hash = this.currentModel;
var store = this.store;
// tell controller to reset/cleanup - you should set any
// model related properties ie 'content'/'model' and 'debt_list'
// to null/default values.
this.controller.reset();
if (hash)
// dispose of models after views have been finalised
Ember.run.once(function() {
hash.content.rollback();
store.unloadRecord(hash.content);
hash.debt_list.forEach(function(debt) {
debt.rollback();
store.unloadRecord(debt);
});
});
}
}
}
});
I have updated your JSBin here so its working perfectly, models are correctly removed from the store.
这篇关于EmberJS：bootstrap模态拒绝重新打开由于记录未正确删除？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
