kesalahan aurelia-templating-router 1.0.1 dengan swap-order

memperbarui router aurelia-templating untuk 1.0.1

ketika saya menggunakan <router-view swap-order="with"></router/view> Terjadi kesalahan

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

Jika saya menghapus swap-order="with" kesalahannya hilang

Jika saya menggunakan versi 1.0.0, bahkan dengan swap-order="with", semuanya berfungsi. Seseorang mengalami ini?

Saya tidak bisa bermain di GistRun, kontennya mengikuti (Skrip Ketik):

au new myapp

aplikasi.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>

rumah.html

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

home.ts

export class Home{}

Itu cukup untuk melihat kesalahannya.

au run --watch

aurelia
person Fabio Nogueira    schedule 08.12.2016    source sumber
comment
Apakah ada kemungkinan Anda dapat membuat repro ini di Gist.run dan kemudian memposting masalah ke repo router di github?   -  person Ashley Grant    schedule 08.12.2016
comment
Dengan asumsi </router/view> Anda hanya salah ketik di sini dan bukan pada kode Anda, bukan? Seharusnya </router-view>.   -  person LStarky    schedule 08.12.2016
comment
Ya </router/view> hanya salah ketik di sini dan bukan pada kode Anda   -  person Fabio Nogueira    schedule 08.12.2016
comment
gist.run/?id=883568d7c8e2add9ed393150100f4744 Untuk membuat repro, Anda dapat memulai dari sana   -  person PW Kad    schedule 08.12.2016
comment
Masalah yang sama bagi saya, ada solusinya?   -  person isar    schedule 05.01.2017
comment
Saya menambahkan masalah ini untuk router aurelia di sini dan GistRun yang menunjukkan masalah tersebut di sini.   -  person Jeff G    schedule 15.01.2017

Jawaban (1)


arrow_upward
1
arrow_downward

Masalah ini tampaknya berasal dari bug di router aurelia-templating.

Masalah ini dilaporkan di sini: https://github.com/aurelia/router/issues/458 dan mungkin akan segera diperbaiki, namun untuk saat ini dapat diperbaiki hanya dengan melakukan perubahan pada router aurelia-templating.

Saat ini, dalam fungsi swap di router-view.js dari aurelia-templating-router, previousView didefinisikan di dalam definisi fungsi kerja seperti ini:

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

Saat ini, PreviousView tidak disetel dengan objek yang benar untuk Tampilan Sebelumnya dan gagal ditemukan sebagaimana mestinya ketika dihapus.

Ketika saya mengubah previousView untuk didefinisikan dalam cakupan fungsi swap, semuanya tampak berfungsi sebagaimana mestinya dan lulus semua pengujian.

Tampaknya yang perlu dilakukan hanyalah memindahkan definisi PreviousView.

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

Anda dapat dengan mudah mereproduksi kesalahan tersebut di sini: https://github.com/bbarne8/AureliaSwapOrderRepro

person Ben    schedule 13.02.2017