mercredi 16 décembre 2015

Ember Shepherd doesn't recognize DOM changes

Description

I am using ember with ember-shepherd and have come across an annoying issue. Every time the DOM is changed during the tutorial, shepherd doesn't seem to recognize any of the changes and therefore breaks when trying to anchor to a tag that wasn't there when it originally loaded.

Does anyone know how to make shepherd reload the DOM without reloading the entire page?

Example

controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  tour: Ember.inject.service(),

  showDiv: false,

  setupTutorial: function () {
    this.set('tour.steps', [
      {
        id: '1',
        options: {
          attachTo: '#some-div top',
          text: 'Read me!',
          when: {
            hide: () => {
              this.set('showDiv', true);
            }
          }
        }
      },
      {
        id: '2',
        options: {
          attachTo: '#hidden-div top',
          text: 'Shhh I am hidden.'
        }
      }
    ]);

    this.get('tour').trigger('start');
  }.on('init')
});

template.hbs

<div id="some-div">
  More stuff.
</div>

{{#if showDiv}}
  <div id="hidden-div">
    Blargh
  </div>
{{/if}}

The first tour step will show perfectly fine, but the second step will not locate the "hidden-div" anchor after it is inserted into the DOM.




Aucun commentaire:

Enregistrer un commentaire