设置cookie后，Ember模板没有重新加载

Question

我有一点问题。 我有一个“使用按钮”，它设置一个cookie，告诉我使用了这笔交易。 按钮开关状态为禁用。

问题是，如果你前后退，按钮不再被禁用，你仍然可以使用按钮。 如果刷新页面，该按钮将被禁用。

这是我的代码：

 export default Ember.Controller.extend(MobileHelper, { goodie: Ember.computed.alias('model'), tracker: Ember.inject.service(), used: undefined, fieldUsed: function(){ var pack_id = this.get('goodie.packContents.firstObject.id'); var cookies; if (this.cookie.getCookie('gp_pv') === undefined) { return false; } else { cookies = JSON.parse(this.cookie.getCookie('gp_pv')); } return cookies[String(pack_id)] === 1; }.property('goodie.packContents.firstObject.id'), profileComponent: function() { return `goodie-${this.get('goodie.type')}-profile`; }.property('goodie.type'), actions: { markSwiped: function() { var cookies; if (confirm("Er du sikker?")){ if (this.cookie.getCookie('gp_pv') === undefined){ cookies = {}; } else { cookies = JSON.parse(this.cookie.getCookie('gp_pv')); } var pack_id = this.get('goodie.packContents.firstObject.id'); if (cookies[String(pack_id)] !== 1){ cookies[String(pack_id)] = 1; } jQuery("#itemUsable").hide(); jQuery("#itemUsed").show(); this.get('tracker').trackGoodieExternalLinkClick(this.get('goodie')); this.cookie.setCookie('gp_pv', JSON.stringify(cookies), { expires: 50000, path: '/' }); this.container.lookup('view:toplevel').rerender(); route.transitionTo("index") } } } }); 

  {{#if fieldUsed}} <style> #itemUsable {display:none;} #itemUsed {display:block;} </style> {{else}} <style> #itemUsable {display:block;} #itemUsed {display:none;} </style> {{/if}} <div class="container" id="itemUsed"> <div class="goodie-page-swipe-action"> <div class="row"> <div class="col-xs-offset-3 col-xs-6"> <div class="btn gp-btn-primary btn-block btn-lg disabled">{{ t 'goodie.used'}}</div> </div> </div> </div> </div> <div class="container" id="itemUsable"> <div class="goodie-page-swipe-action"> <div class="row"> <div class="col-xs-offset-3 col-xs-6"> <div {{ action 'markSwiped' }} class="btn gp-btn-primary btn-block btn-lg">{{ t 'goodie.use'}}</div> </div> </div> </div> </div> 

Answer 1

计算属性值通常被缓存，并且仅在从属键的值更改时才更新。 从提供的代码中可以看出，当markSwiped运行时， goodie.packContents.firstObject.id立即发生变化。 我想它没有，因为fieldUsed因此你的模板没有得到更新（这意味着你更新的cookie值永远不会被重新评估，直到整页刷新）。

想到的事情你可以尝试：

• 你可以尝试使fieldUsed成为一个volatile属性 ，希望它能在每次使用时重新评估（不再缓存）

   fieldUsed: function() {...}.volatile() 

• 使fieldUsed取决于其他值，或者另外。 例如，作为一个拐杖，你可以测试一些无关的计数器类型变量，它只是在markSwiped某处markSwiped

   crutchCounter: 0, fieldUsed: function() {}.property('goodie.packContents.firstObject.id', 'crutchCounter'), markSwiped: function() {...; this.incrementProperty('crutchCounter'); ...} 

如果其中任何一个工作，那么您也可以放弃在markSwiped的jQuery DOM操作。