javascript - 设置 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 property这有望导致它在每次使用时重新评估(不再缓存)

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

• 使 fieldUsed 依赖于其他值，或者另外依赖。例如，作为拐杖，您可以测试一些无关的计数器类型变量，这些变量只是在 markSwiped

  中的某处递增

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

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