如何在Ember中绑定<details>元素的open属性？

Question

我有一些入职步骤是工作流程的一部分。这些步骤包含在我在他们第一次访问时默认打开的 <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中打开的详情？

Answer 1

Ember 将状态 (isOnboarded) 存储在内存中，并在状态更改时重新呈现 DOM。但是，Ember 不会检查 DOM 以协调状态。请注意，这不是 Ember 的限制，大多数 js 框架也是这样工作的。 DOM 的持续协调在计算上不可行。

您可以阻止默认行为并使用 Ember 来切换它。

controller.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
    }
  }
});

template.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 胡闹：https://ember-twiddle.com/65a4cffe7e8fb8bcf41ff7064cc6d524?openFiles=templates.application.hbs%2C

如何在Ember中绑定<details>元素的open属性？

How to bind an <details> element's open attribute in Ember?

html

javascript

ember.js