如何在余烬中绑定<details>元素的open属性?

余烬储存着这个州( isOnboarded )并在状态改变时重新呈现DOM。然而,余烬并没有检查DOM来协调状态。请注意,这不是Ember的限制,大多数js框架也是这样工作的。DOM的不断协调在计算上是不可行的。

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

控制器。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
    }
  }
});

样板哈佛商学院

<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>

余烬旋转: https://ember-twiddle.com/65a4cffe7e8fb8bcf41ff7064cc6d524?openFiles=templates.application.hbs%2C