Bagaimana Anda secara dinamis mengikat parameter rute-href di Aurelia?

Saya menggunakan pushState, dan tidak menggunakan hash untuk struktur URL.

Saya memiliki rute, dan memiliki beberapa parameter binding - beberapa opsional:

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

dan kemudian saya mendapatkan rute-href saya, dan saya memiliki ikatan yang diperlukan di sana:

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

...tetapi bagaimana jika saya tidak SELALU menginginkan semua parameter rute untuk route-href? Seperti halnya, saya ingin dapat menautkan hanya ke rute yang menggunakan chartType dan id tanpa harus membuat rute terpisah untuk setiap kombinasi parameter yang saya miliki di rute ini.

Saya tahu saya bisa menggunakan "?" di konfigurasi router untuk menetapkan rute opsional, tetapi bagaimana cara membuat parameter opsional di tautan rute-href saya?

Melakukan sesuatu seperti ini menimbulkan kesalahan:

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

dan sepertinya saya tidak bisa menggunakan sintaks .bind, seperti ini (yang juga error):

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

Apa trik sintaksis ajaib di sini?


parameters binding router routing aurelia
person Nathan Chase    schedule 13.03.2017    source sumber

Jawaban (2)


arrow_upward
3
arrow_downward

Coba buat properti chartParams. Perbarui properti ini setiap kali Anda mengubah chart. Lalu, Anda bisa melakukan ini route-href="/idroute.bind: chart; params.bind: chartParams. (Saya belum menguji pendekatan ini tetapi menurut saya ini akan berhasil)

Pilihan lainnya adalah membuat rute secara manual. Misalnya:

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

Kemudian, Anda dapat mengikatnya ke tag tautan:

<a href.bind="myRoute">My Route</a>
person Fabio Luz    schedule 13.03.2017
comment
Jawaban mana yang tidak berhasil? Yang pertama atau yang kedua? Ada 2 jawaban terpisah - person Fabio Luz; 22.11.2017

arrow_upward
4
arrow_downward

Masalahnya adalah meskipun Aurelia dapat mengamati primitif, objek, dan array, ia tidak dapat mengamati properti objek atau elemen array.

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

Ini akan berfungsi tetapi tidak akan diperbarui ketika chartId, type, viewType, dan pageNum diperbarui. Nilai yang diteruskan ke pengikatan adalah objek { id, chartType view, page }, dan Aurelia tidak dapat mengamati properti objek ini. Oleh karena itu, hal terbaik untuk dilakukan adalah membuat objek.

Mungkin dalam model tampilan Anda memiliki:

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

Tingkatkan menjadi ini:

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 };
  }
}

Sekarang, karena nilai objek linkParams sedang diperbarui, dan bukan hanya propertinya, Aurelia akan mengamatinya. Ini menghasilkan solusi yang diberikan Fabio:

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