Как связать атрибут открытия элемента <details>в Ember? - PullRequest
Новая
       9

Как связать атрибут открытия элемента <details>в Ember?

0 голосов
/ 01 июня 2018

У меня есть некоторые входящие шаги, которые являются частью рабочего процесса.Эти шаги содержатся в элементе <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?

1 Ответ

0 голосов
/ 03 июня 2018

Ember сохраняет состояние (isOnboarded) в памяти и повторно отображает DOM при каждом изменении состояния.Тем не менее, Эмбер не проверяет DOM, чтобы примирить состояние.Обратите внимание, что это не ограничение Ember, большинство js framework также работает следующим образом.Постоянное согласование 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 Twiddle: https://ember -twiddle.com / 65a4cffe7e8fb8bcf41ff7064cc6d524? OpenFiles = templates.application.hbs% 2C

...