如何让 Ember 检测到变化的复选框以及跟踪的微光?
How to get Ember to detect a checkbox on change along with a glimmer tracked?
在 ember js 版本 3.2.6 中,我们如何获得一个复选框来对更改的值执行额外的逻辑?
例如,我有一个 updateServer
的复选框(一个切换 true/false)。
现有代码使用的是 glimmer
@tracked
,这可以很好地显示一些即时 UI 修改,如 application.hbs
.
中所示
Value of update server:
{{updateServer}}
但是我需要添加一些关于值更改的逻辑,请参阅 onCheckboxChange
。那个函数被调用了,但是 updateServer
的值似乎不是点击后的值。这是较旧的,在点击之前。见图。
如何获取 updateServer
的最新值?
application.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}`);
}
}
application.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}}
一个简单的解决方案是不使用 <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}`);
}
在 ember js 版本 3.2.6 中,我们如何获得一个复选框来对更改的值执行额外的逻辑?
例如,我有一个 updateServer
的复选框(一个切换 true/false)。
现有代码使用的是 glimmer
@tracked
,这可以很好地显示一些即时 UI 修改,如 application.hbs
.
Value of update server:
{{updateServer}}
但是我需要添加一些关于值更改的逻辑,请参阅 onCheckboxChange
。那个函数被调用了,但是 updateServer
的值似乎不是点击后的值。这是较旧的,在点击之前。见图。
如何获取 updateServer
的最新值?
application.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}`);
}
}
application.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}}
一个简单的解决方案是不使用 <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}`);
}