error aurelia-templating-router 1.0.1 with swap-order

问题

updated aurelia-templating-router for 1.0.1

when I use <router-view swap-order="with"></router/view> An error occurs

[app-router] TypeError: Cannot read property 'animatableElement' of undefined

If I remove swap-order="with" the error disappears

If I use version 1.0.0, even with swap-order="with", everything works. Someone went through this?

I could not play on GistRun, it follows content (Typescript):

au new myapp

app.ts

export class App {
  router:any;
  configureRouter(config, router) {
    this.router = router;
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'home'],  name: 'home', moduleId: 'home'}
    ]);
  }
}

app.html

<template><router-view swap-order="with"></router-view></template>

home.html

<template><h1>HOME</h1></template>

home.ts

export class Home{}

That's enough to see the error.

au run --watch

回答1:

This issue appears to be coming from a bug in the aurelia-templating-router.

The issue is reported here: https://github.com/aurelia/router/issues/458 and probably will be fixed soon, but for now it can be fixed by simply making the change in the aurelia-templating-router.

Currently, in the swap function in router-view.js of the aurelia-templating-router, 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

来源：https://stackoverflow.com/questions/41029542/error-aurelia-templating-router-1-0-1-with-swap-order

标签

aurelia