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

Question

I have a little problem. I have a "use-button" which sets a cookie, telling that this deal is used. The button switch state to disabled.

The problem is that, if you go back and forwards, the button is no longer disabled and you can still use the button. If you refresh the page the button will be disabled.

This is my code:

 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

Computed property values are normally cached and only updated when the values of the dependent keys change. From the provided code it is not immediately obvious that, when markSwiped gets run, goodie.packContents.firstObject.id immediately changes. I guess it doesn't, since fieldUsed and thus your templates do not get updated (which means the cookie value that you do update is never re-evaluated, until a full page refresh).

Things that come to mind that you could try:

• You could try to make fieldUsed a volatile property which would hopefully cause it to be re-evaluated on every use (no longer cached)

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

• Make fieldUsed depend on some other value instead, or in addition. For instance, as a crutch you could test some extraneous counter type variable that simply gets incremented somewhere in markSwiped

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

If either of these work, you can then also forego the jQuery DOM manipulation you have going on in markSwiped .