아우렐 리아 - 나는 라우터보기에 탭을 변경하는 경우

Question

내 양식 재설정 계속 라우터보기에 비활성화 리셋 (대안은 무엇되지 않은 경우)

export class App { 
configureRouter(config, router) { 
config.title = "Aurelia"; 
config.map([ 
    { route: ["", "dashboard"], name: "dashboard", moduleId: "HTML/viewmodels/dashboard", nav: true, title: "Dashboard", settings: "icon-home" }, 
    { route: "addons", name: "addons", moduleId: "HTML/viewmodels/addons", nav: true, title: "Addons", settings: "icon-file" }, 
    { route: "error", name: "error", moduleId: "HTML/viewmodels/error", nav: true, title: "Error", settings: "icon-info-sign" } 
]); 

this.router = router; 
console.log(router); 
    } 
} 

Answer 1

이 상태 계속 발생이이를 방지하는 방법은 무엇입니까 발행물.

• 상위 뷰
• 불가 시청 관련된 단일 클래스 (또는 정적 변수)
• 로컬 스토리지는 지속 (아마도 이전 옵션과 일치)

: 쉬운 솔루션의 상태를 저장하는

---

첫 번째 방법 : 부모보기로 저장하십시오.

예를 들어, 당신은 App 클래스 내부의 캐시를 만들 수 있습니다

activate(params, routeConfig) { 
    this.formData = routeConfig.settings.formData; 
    this.icon = routeConfig.settings.icon; 
} 

을 그리고 HTML에서, 단지에 바인딩 : 당신의 내부보기

export class App { 
    formData = {}; 

    configureRouter(config, router) { 
    { route: ["", "dashboard"], [..snip..] settings: { formData: this.formData, icon: 'icon-home' } } 
    } 
} 

당신은 할 수있다 formData :

<input type="text" value.bind="formData.text" /> 

이러한 종류의 가정은 tha 전체 App은 해당 형식을 중심으로 회전합니다. 그렇지 않으면 거기에 저장하는 것이별로 의미가 없습니다.

어쨌든 (내가 목록에서 지적한 첫 번째 방법) 그렇게하는 한 가지 방법입니다.

---

다른 방법은 그것을 할 수 있습니다 : 싱글을.

AppState 또는 그 라인을 따라 새로운 클래스를 만듭니다. 보기에 그런

export class AppState { 
    formData = {}; 
} 

가져올해야하며 주입 : 당신의 HTML에 다음

import { AppState } from './app-state'; 

export class YourView { 
    static inject = [AppState]; 

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

을, 당신은 지금처럼 바인딩 할 수 있습니다 :

<input type="text" value.bind="appState.formData.text" /> 

---

또는 세 번째 방법 : 정적 클래스.

AppState 또는 그 라인을 따라 새로운 클래스를 만듭니다.

export class AppState { 
    static formData = {}; 
} 

그런 다음보기에서 가져오고 그것을 주입해야합니다 수입에서 {AppState 서비스} './ app-state '; 내 모든 탭이 지속 상태로하려면 어떤

<input type="text" value.bind="AppState.formData.text" />