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操作。

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

1 个答案: