คุณจะผูกพารามิเตอร์เส้นทาง -href แบบไดนามิกใน Aurelia ได้อย่างไร

ฉันใช้ pushState และไม่ใช้แฮชสำหรับโครงสร้าง URL

ฉันมีเส้นทางและมีการเชื่อมโยงพารามิเตอร์บางอย่าง - บางอย่างเป็นทางเลือก:

route: [                        
     'chart/:chartType/:id',
     'chart/:chartType/:id/:view?',
     'chart/:chartType/:id/page/:page?',
     'chart/:chartType/:id/:view?/page/:page?'
],

จากนั้นฉันก็ได้ path-href แล้ว และฉันก็มีข้อผูกมัดที่จำเป็นอยู่ที่นั่น:

route-href="/throute.bind: chart; params.bind: { id: chartId, chartType: type, view: viewType, page: pageNum }"

...แต่จะเป็นอย่างไรถ้าฉันไม่ต้องการพารามิเตอร์เส้นทางทั้งหมดสำหรับ route-href เสมอไป ฉันต้องการเชื่อมโยงไปยังเส้นทางที่ใช้ ChartType และ id โดยไม่ต้องสร้างเส้นทางแยกกันสำหรับชุดพารามิเตอร์ทุกชุดที่ฉันมีในเส้นทางนี้

ฉันรู้ว่าฉันสามารถใช้ "?" ในการกำหนดค่าเราเตอร์เพื่อกำหนดเส้นทางที่เป็นตัวเลือก แต่ฉันจะทำให้พารามิเตอร์เป็นตัวเลือกในลิงก์ Route-href ของฉันได้อย่างไร

การทำสิ่งนี้ทำให้เกิดข้อผิดพลาด:

route-href="/throute.bind: chart; params.bind: { id: chartId, chartType: type, view?: viewType, page?: pageNum }"

และดูเหมือนว่าฉันจะใช้ .bind ไวยากรณ์ไม่ได้ เช่นนี้ (ซึ่งมีข้อผิดพลาดด้วย):

route-href="/throute.bind: chart; params.bind: { id: chartId, chartType: type, view.bind: hasViewParam, page.bind: hasPageParam }"

เคล็ดลับไวยากรณ์วิเศษที่นี่คืออะไร


parameters binding router routing aurelia
person Nathan Chase    schedule 13.03.2017    source แหล่งที่มา

คำตอบ (2)


arrow_upward
3
arrow_downward

ลองสร้างคุณสมบัติ chartParams อัปเดตคุณสมบัตินี้ทุกครั้งที่คุณเปลี่ยน chart จากนั้น คุณสามารถทำสิ่งนี้ route-href="/throute.bind: chart; params.bind: chartParams (ฉันไม่ได้ทดสอบวิธีนี้ แต่ฉันคิดว่ามันจะได้ผล)

อีกทางเลือกหนึ่งคือการสร้างเส้นทางด้วยตนเอง ตัวอย่างเช่น:

this.myRoute = this.router.generate(routeName, params);

จากนั้น คุณสามารถผูกเข้ากับแท็กลิงก์ได้:

<a href.bind="myRoute">My Route</a>
person Fabio Luz    schedule 13.03.2017
comment
คำตอบใดใช้ไม่ได้ผล? ครั้งแรกหรือครั้งที่สอง? มี 2 ​​คำตอบแยกกัน - person Fabio Luz; 22.11.2017

arrow_upward
4
arrow_downward

ปัญหาคือแม้ว่า Aurelia จะสามารถสังเกตวัตถุดั้งเดิม วัตถุ และอาร์เรย์ได้ แต่ก็ไม่สามารถสังเกตคุณสมบัติของวัตถุหรือองค์ประกอบของอาร์เรย์ได้

<a route-href="/throute.bind: chart; params.bind: { id: chartId, chartType: type, view: viewType, page: pageNum }">link</a>

วิธีนี้จะใช้งานได้แต่จะไม่อัปเดตเมื่อมีการอัปเดต chartId, type, viewType และ pageNum ค่าที่ส่งไปยังการเชื่อมโยงคือออบเจ็กต์ { id, chartType view, page } และ Aurelia ไม่สามารถสังเกตคุณสมบัติของออบเจ็กต์นี้ได้ ดังนั้นวิธีที่ดีที่สุดคือสร้างวัตถุขึ้นมา

บางทีในโมเดลมุมมองของคุณคุณอาจมี:

export class ViewModel {
  chartId;
  type;
  viewType;
  pageNum;
}

ปรับปรุงให้เป็นดังนี้:

import { observable } from 'aurelia-framework';

export class ViewModel {

  @observable({ changeHandler: 'generateLinkParams'}) chartId;
  @observable({ changeHandler: 'generateLinkParams'}) type;
  @observable({ changeHandler: 'generateLinkParams'}) viewType;
  @observable({ changeHandler: 'generateLinkParams'}) pageNum;
  linkParams;

  generateLinkParams() {
    const { chartId, type, viewType, pageNum } = this;
    this.linkParams = { chartId, type, viewType, pageNum };
  }
}

ขณะนี้ เนื่องจากค่าของอ็อบเจ็กต์ linkParams กำลังได้รับการอัปเดต และไม่ใช่แค่คุณสมบัติของมัน Aurelia จะสังเกตมัน ผลลัพธ์ที่ได้คือโซลูชันที่ฟาบิโอมอบให้:

<a route-href="/throute.bind: chart; params.bind: linkParams">link</a>
person Matthew James Davis    schedule 10.12.2017