ошибка aurelia-templating-router 1.0.1 с порядком подкачки

обновлен aurelia-templating-router для версии 1.0.1

когда я использую <router-view swap-order="with"></router/view> возникает ошибка

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

Если я удалю swap-order="with", ошибка исчезнет

Если использую версию 1.0.0, то даже с swap-order="with" все работает. Кто-то проходил через это?

Я не смог поиграть на GistRun, следует содержание (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{}

Этого достаточно, чтобы увидеть ошибку.

au run --watch

aurelia
person Fabio Nogueira    schedule 08.12.2016    source источник
comment
Есть ли шанс, что вы можете создать копию этого на gist.run, а затем опубликовать проблему в репозитории маршрутизатора на github?   -  person Ashley Grant    schedule 08.12.2016
comment
Предполагая, что ваш </router/view> всего лишь опечатка здесь, а не в вашем коде, верно? Должно быть </router-view>.   -  person LStarky    schedule 08.12.2016
comment
Да </router/view> это только опечатка здесь, а не в вашем коде   -  person Fabio Nogueira    schedule 08.12.2016
comment
gist.run/?id=883568d7c8e2add9ed393150100f4744 Чтобы создать реплику, вы можете начать здесь   -  person PW Kad    schedule 08.12.2016
comment
Такая же проблема у меня, есть решение?   -  person isar    schedule 05.01.2017
comment
Я добавил эту проблему для маршрутизатора aurelia здесь и GistRun, демонстрирующий проблему здесь.   -  person Jeff G    schedule 15.01.2017

Ответы (1)


arrow_upward
1
arrow_downward

Эта проблема возникает из-за ошибки в aurelia-templating-router.

О проблеме сообщается здесь: https://github.com/aurelia/router/issues/458 и, вероятно, скоро будет исправлено, но пока это можно исправить, просто внеся изменения в aurelia-templating-router.

В настоящее время в функции подкачки в router-view.js маршрутизатора aurelia-templating-router предыдущее представление определяется внутри определения рабочей функции следующим образом:

//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();
        });
      });
    };
...

В нынешнем виде предыдущее представление не устанавливается с правильным объектом для предыдущего представления и не может быть найдено должным образом при его удалении.

Когда я изменил предыдущее представление, чтобы оно было определено в рамках функции подкачки, все, казалось, работало как надо, и оно проходит все тесты.

Похоже, все, что нужно сделать, это просто переместить определение предыдущего представления.

//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();
        });
      });
    };
...

Вы можете легко воспроизвести ошибку здесь: https://github.com/bbarne8/AureliaSwapOrderRepro

person Ben    schedule 13.02.2017