Bind über Vorlagen

Question

Bei app.html Es zeichnet eine Brotkrümel Brotkrumen Vorlage

<template> 
    <nav> 
    <ol class="breadcrumb"> 
     <li repeat.for="crumb of breadcrumb" class="breadcrumb-item ${$last ? 'active' : ''}"> 
     ${crumb.name} 
     </li> 
    </ol> 
    </nav> 
</template> 

Nun würde Ich mag einen anderen Wert für „Brotkrumen“ Eigenschaft für jede Seite definieren. Aber ich würde es vorziehen, die Breadcrumb-Vorlage nur einmal bei app.html aufzurufen.

export class PageA { 
    breadcrumb = ['parentA', 'childA'] 
    constructor() { 
    } 
} 

export class PageB { 
    breadcrumb = ['parentB', 'childB'] 
    constructor() { 
    } 
} 

Wie kann ich das erreichen?

Answer 1

Wenn Sie Ihr breadcrumb benutzerdefiniertes Element in der app.html-Ansicht (und nicht in jeder einzelnen Seitenansicht) deklarieren und seine breadcrumb-Eigenschaft an die in untergeordneten Seiten deklarierten Werte binden möchten, ist die einfachste Lösung zu verwenden Ein separater Singleton-Dienst, der die Breadcrumb-Daten enthält.

Zum Beispiel:

import { singleton } from "aurelia-framework"; 

@singleton() 
export class BreadcrumbService { 
    breadcrumb = []; 
} 

es in Ihre breadcrumb.js Injizieren wie so:

import { inject } from "aurelia-framework" 
import { BreadcrumbService } from "./breadcrumb-service"; 

@inject(BreadcrumbService) 
export class Breadcrumb{ 
    constructor(breadcrumbService) { 
     this.breadcrumbService = breadcrumbService; 
    } 
} 

Mit einer leichten Änderung an Ihren breadcrumb.html:

<template> 
    <nav> 
     <ol class="breadcrumb"> 
      <li repeat.for="crumb of breadcrumbService.breadcrumb" class="breadcrumb-item ${$last ? 'active' : ''}"> 
       ${crumb.name} 
      </li> 
     </ol> 
    </nav> 
</template> 

dann in Auf jeder untergeordneten Seite würden Sie den BreadcrumbService einfügen und dessen Breadcrumb-Eigenschaft ändern, wodurch t automatisch aktualisiert wird er Wert in Ihrer breadcrumb.js:

import { inject } from "aurelia-framework" 
import { BreadcrumbService } from "breadcrumb-service"; 

@inject(BreadcrumbService) 
export class PageA { 
    constructor(breadcrumbService) { 
     breadcrumbService.breadcrumb = ['parentA', 'childA']; 
    } 
} 

@inject(BreadcrumbService) 
export class PageB { 
    constructor() { 
     breadcrumbService.breadcrumb = ['parentB', 'childB']; 
    } 
} 

EDIT

Sie können eine Bindung refresh auf dem repeat.for durch erste Spleißen des Brotkrumen-Array auf dem Brotkrumen-Dienst jedes Mal zwingen müssen, bevor es zu ändern In Ihren Child-Seiten wird die Zielbindung möglicherweise nicht aktualisiert, wenn Sie das Array auf einen anderen Wert setzen. Dies liegt daran, dass repeat.for einen Auflistungsbeobachter verwendet, der auf .splice() usw. hört, aber nicht auf die Gleichheit der Array-Objektreferenz prüft.

Sie könnten dies in der BreadcrumbService kapseln:

import { singleton, TaskQueue, inject } from "aurelia-framework"; 

@singleton() 
@inject(TaskQueue) 
export class BreadcrumbService { 
    breadcrumb = []; 

    constructor(taskQueue) { 
     this.taskQueue = taskQueue; 
    } 

    setBreadcrumb(breadcrumb) { 
     this.breadcrumb.splice(0); 

     // Using a micro task gives the repeat.for an opportunity to respond to the .slice() before setting the new values 
     this.taskQueue.queueMicroTask(() => { 
      this.breadcrumb.push(breadcrumb); 
     }); 
    } 
} 

Und in Ihrem Kind Seiten:

import { inject } from "aurelia-framework" 
import { BreadcrumbService } from "breadcrumb-service"; 

@inject(BreadcrumbService) 
export class PageA { 
    constructor(breadcrumbService) { 
     breadcrumbService.setBreadcrumb(['parentA', 'childA']); 
    } 
} 

@inject(BreadcrumbService) 
export class PageB { 
    constructor() { 
     breadcrumbService.setBreadcrumb(['parentB', 'childB']); 
    } 
}