Ember Shepherd doesn't recognize DOM changes

Question

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.

Answer 1

在当前版本的ember-shepard插件中，步骤的所有游览dom元素都应在开始游览.trigger('start');之前存在.trigger('start');