ข้อผิดพลาด 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'}
    ]);
  }
}

แอป.html

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

โฮม.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 แล้วโพสต์ปัญหาไปยัง repo เราเตอร์บน 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

ในปัจจุบัน ในฟังก์ชัน swap ใน router-view.js ของ aurelia-templating-router นั้น PreviousView ถูกกำหนดไว้ภายในคำจำกัดความของฟังก์ชันการทำงานดังนี้:

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

ดังที่กล่าวมา PreviousView ไม่ได้รับการตั้งค่าด้วยวัตถุที่ถูกต้องสำหรับมุมมองก่อนหน้า และไม่พบอย่างที่ควรจะเป็นเมื่อถูกลบออก

เมื่อฉันเปลี่ยน PreviousView เพื่อกำหนดในขอบเขตของฟังก์ชัน swap ทุกอย่างดูเหมือนจะทำงานได้ตามปกติและผ่านการทดสอบทั้งหมด

ดูเหมือนว่าสิ่งที่ต้องทำก็แค่ย้ายคำจำกัดความของ 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();
        });
      });
    };
...

คุณสามารถทำซ้ำข้อผิดพลาดได้อย่างง่ายดายที่นี่: https://github.com/bbarne8/AureliaSwapOrderRepro

person Ben    schedule 13.02.2017