私はクッキーを設定した後にEmberのテンプレートが再ロードされない

Question

私は少し問題があります。 私はこの取引が使用されていることを伝えるクッキーを設定する「使用ボタン」を持っています。ボタンスイッチの状態が無効になります。

問題は、前後に進むとボタンが無効にならなくなり、ボタンを使用できることです。ページを更新すると、ボタンは無効になります。

これは私のコードです：

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以来、あなたのテンプレートは更新されません（つまり、あなたが更新を行うクッキー値は、完全なページリフレッシュまで、再評価されないことを意味する）からではないと思います。

あなたが試みることができることを心に来るもの：

• あなたがうまくいけば、それはすべての使用（もはやキャッシュ）

  に再評価されるべきだろう原因fieldUsedvolatile propertyを作ってみることができ

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

• fieldUsedは、代わりに、またはその他の値に依存します。これらの作業のいずれか、あなたはまた、あなたが起こっているjQueryのDOM操作を見送ることができる場合たとえば、松葉杖として、あなたは、単にmarkSwiped

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

のどこかにインクリメントされますいくつかの余分なカウンター型の変数をテストすることができmarkSwipedにあります。