如何讓 Ember 檢測到變化的復選框以及跟蹤的微光？

Question

在 ember.js 版本 3.2.6 中，我們如何獲得一個復選框來對值更改執行額外的邏輯？

例如，我有一個用於updateServer的復選框（切換真/假）。 現有代碼使用glimmer @tracked並且這可以很好地顯示一些即時 UI 修改，如application.hbs所示。

Value of update server:
{{updateServer}} 

但是我需要添加一些關於值更改的邏輯，請參閱onCheckboxChange 。 那個function被調用了，但是updateServer的值好像不是點擊后的值。 這是較舊的，在點擊之前。 見圖片。

如何獲取updateServer的最新值？

應用程序.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  @tracked updateServer = false;

  @action
  onCheckboxChange() {
    //some extra logic
    console.log(`at controller, updateServer is: ${this.updateServer}`);
  }
}

應用程序.hbs

{{page-title 'EmberSimple'}}

<label>
  <Input @type='checkbox' @checked={{this.updateServer}} {{on 'change' onCheckboxChange}}/>
  Update Server</label>
<br />
Value of update server:
{{updateServer}}
<br />
{{outlet}}

Answer 1

一個簡單的解決方案是不使用<Input而是原始的<input 。 這可能看起來像這樣：

<input type="checkbox" checked={{this.updateServer}} {{on "click" this.onCheckboxChange}} />

但是，您需要手動將新值分配給跟蹤屬性：

@action
onCheckboxChange(event) {
  this.updateServer = event.target.checked;
  console.log(`at controller, updateServer is: ${this.updateServer}`);
}