javascript - 如何绑定一个Ember中元素的open属性?
问题描述
我有一些作为工作流程一部分的入职步骤。这些步骤包含在<details>
我第一次访问时默认打开的元素中。要关闭详细信息面板,用户可以单击确认他们了解这些步骤的按钮,或者只需单击<summary>
作为详细信息元素默认行为的元素。
<details open={{not isOnboarded}}>
<summary>Getting Started</summary>
<p>some steps about getting started</p>
<button type="button" {{action 'completeOnboarding'}}>I Understand</button>
</details>
不幸的是,由于<details>
元素open
本身切换属性这一事实,它似乎正在删除 Ember 的绑定。
如何绑定在 Ember 中打开的详细信息?
解决方案
Ember 将状态 ( isOnboarded
) 存储在内存中,并在状态更改时重新渲染 DOM。但是,Ember 不会检查 DOM 来协调状态。请注意,这不是 Ember 的限制,大多数 js 框架也是这样工作的。DOM 的不断协调在计算上是不可行的。
您可以阻止默认行为并使用 Ember 来切换它。
控制器.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
isOpen: true,
actions: {
toggleDetails () {
this.toggleProperty('isOpen')
},
onNativeToggle (e) {
// e here is the native HTMLEvent
e.preventDefault()
this.send('toggleDetails') // triggers the 'toggleDetails' action
}
}
});
模板.hbs
<details open={{isOpen}} onclick={{action 'onNativeToggle'}}>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<button onclick={{action 'toggleDetails'}}> Click to Toggle via Ember </button>
一个 Ember Twiddle:https ://ember-twiddle.com/65a4cffe7e8fb8bcf41ff7064cc6d524?openFiles=templates.application.hbs%2C