代码之家  ›  专栏  ›  技术社区  ›  Soviut

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

  •  3
  • Soviut  · 技术社区  · 7 年前

    我有一些入职步骤是工作流程的一部分。这些步骤包含在 <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>
    

    不幸的是,因为 <细节> 元素切换 open 属性,它似乎正在移除余烬的绑定。

    我怎样才能在余烬中绑定打开的细节?

    1 回复  |  直到 7 年前
        1
  •  5
  •   Soviut    7 年前

    余烬储存着这个州( 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