title: Use activationStrategy: replace on a custom element - not the entire route
body: <p>I'm building a multi step form that asks one question per page.</p>
  
  <p>Each question can be a different type, and sometimes the same question type will appear one after the other.</p>
  
  <p>I'm also using selectize to enhance my multiple selects.</p>
  
  <p>The problem I'm having is that when two multiple selects come after each other Aurelia won't reinitialise selectize, so the previously selected items will still be there in the new question.</p>
  
  <p>Not only that, but going back and forward between questions eventually produces incomprehensible errors.</p>
  
  <p>I've solved this by setting <code>activationStrategy: replace</code> on this route, and while this works it feels like there must be a better way to solve it?</p>
  
  <p>I find it a little bit weird that such a "simple" setting completely changes the way my custom elements are run. With it it's like starting from scratch every time, but without it the only thing that gets called in my VM is the <code>questionChanged()</code> method (which I added as a way to detect when the bindable <code>question</code> object changes).</p>
  
  <p>What's annoying though is that when <code>questionChanged()</code> is called the new question isn't actually attached to the DOM, so trying to reinit selectize in there fails (because the <code>&lt;select&gt;</code> element isn't in the DOM yet).</p>
  
  <p>Should I just settle for using <code>activationStrategy: replace</code> even though it re-renders the entire screen and is probably much worse performance-wise (or?) or is there a better way to handle this?</p>
  
  <p>I've tried using <code>determineActivationStrategy() {return 'replace'}</code> from within my <code>QuestionCustomElement</code> but that doesn't seem to work at all. Is it true that <code>activationStrategy</code> only works for entire routes? Otherwise it'd be ideal for me to just replace that part of the page, while keeping everything else as is.</p>
  
  <p>Here's my custom element that fails to re-render when switching routes (unless <code>activationStrategy: replace</code> is used) (note, most of it is taken from: <a href="https://gist.github.com/monkeyhouse/fc5bd63ec852bad6b5e3" rel="nofollow noreferrer">https://gist.github.com/monkeyhouse/fc5bd63ec852bad6b5e3</a>):</p>
  
  <pre><code>import {inject, bindable, bindingMode} from 'aurelia-framework';
  import jquery from 'jquery';
  import 'selectize';
  
  @inject(Element)
  export class Selectize {
      @bindable name = null;
      @bindable placeholder = 'Select';
  
      @bindable({defaultBindingMode: bindingMode.twoWay}) selected = [];
      @bindable({defaultBindingMode: bindingMode.twoWay}) options = [];
  
      constructor (el) {
          this.el = el;
      }
  
      attached () {
          console.log('selectize attached'); // this is called the first time this element renders, but not again _if_ this component is on the next page/route too
  
          var el = jquery(this.el).find('select');
  
          this.selectize = el.selectize({
              plugins: ['remove_button'],
              onChange: function() {
                  el[0].dispatchEvent(new Event('change', null));
              }
          });
  
          this.selectize[0].selectize.setValue(this.selected);
      }
  
      detached() {
          console.log('selectize detached'); // this is called if the next route does _not_ contain a selectize-element, but not if several routes in a row contain a selectize-element
  
          this.selectize[0].selectize.destroy();
      }
  }
  </code></pre>