swap-order="with" error

[jeffgrann]

I'm submitting a bug report

• Library Version:
  1.1.1

Please tell us about your environment:

• Operating System:
  OSX 10.11.6

• Node Version:
  6.8.1

• NPM Version:
  3.10.8

• JSPM OR Webpack AND Version
  JSPM 0.16.48

• Browser:
  all

• Language:
  all

Current behavior:
When I use </router/view> an error occurs:
[app-router] TypeError: Cannot read property 'animatableElement' of undefined.
And the navigation does not occur. If I remove swap-order="with" or change it to "before" or "after", the error disappears and navigation works correctly.

GistRun: https://gist.run/?id=483906685f79bb97b0c35b28a9af68d8

There is a post from another user on stackoverflow (see link below) that says this does not occur in version 1.0.0 but I haven't verified this. I do know that swap-order="with" worked in previous versions.

stackoverflow post: http://stackoverflow.com/questions/41029542/error-aurelia-templating-router-1-0-1-with-swap-order

Expected/desired behavior:
No error should occur and navigation should work properly.

• What is the expected behavior?
  See above.

• What is the motivation / use case for changing the behavior?
  Bug.

[bbarne8]

This issue appears to be in the swap function in router-view.js of the aurelia-templating-router.

Currently, previousView is defined inside of the work function definition like this:

//router-view.js

  swap(viewPortInstruction) {
    let layoutInstruction = viewPortInstruction.layoutInstruction;

    let work = () => {
//////////////////////////////////////////////////////////////////////////
     let previousView = this.view; ////This is not being correctly set 
//////////////////////////////////////////////////////////////////////////
      let swapStrategy;
      let viewSlot = this.viewSlot;

      swapStrategy = this.swapOrder in swapStrategies
                  ? swapStrategies[this.swapOrder]
                  : swapStrategies.after;

      swapStrategy(viewSlot, previousView, () => {
        return Promise.resolve().then(() => {
          return viewSlot.add(this.view);
        }).then(() => {
          this._notify();
        });
      });
    };
...    

As it stands, previousView is not being set with the correct object for the Previous View and is failing to be found as it should when it is being removed.

When I changed previousView to be defined in the scope of the swap function everything seemed to work as it should and it passes all tests.

It appears that all that needs to be done is simply to move the previousView definition.

//router-view.js

  swap(viewPortInstruction) {
    let layoutInstruction = viewPortInstruction.layoutInstruction;
//////////////////////////////////////////////////////////////////////////
    let previousView = this.view;  ////This is now being correctly set 
//////////////////////////////////////////////////////////////////////////

    let work = () => {
   
      let swapStrategy;
      let viewSlot = this.viewSlot;

      swapStrategy = this.swapOrder in swapStrategies
                  ? swapStrategies[this.swapOrder]
                  : swapStrategies.after;

      swapStrategy(viewSlot, previousView, () => {
        return Promise.resolve().then(() => {
          return viewSlot.add(this.view);
        }).then(() => {
          this._notify();
        });
      });
    };
...    

You can easily reproduce the error here:
https://github.com/bbarne8/AureliaSwapOrderRepro

[Alexander-Taran]

fix merged
can be closed