Polymer Vaadin grid routing

Question

정보가 들어있는 바딤 격자가 있습니다. 다른 링크와 마찬가지로 새 페이지로 라우팅하기 위해 대화 상자를 열지 않고 그리드를 사용하고 싶습니다.

app-route를 사용하고 있지만 다음 페이지로 이동하는 방법을 모르겠다.

각 행에는 라우팅에서 전달되어야하는 모든 고유 한 ID가 있습니다. 클릭하면 각 행에 자체 링크가 표시됩니다. 따라서 각 ID는 전달 된 ID에 따라 페이지를 빌드하는 것과 동일한 요소를 호출하여 localhost : 8000/dashboard/{{id}}이어야합니다.

바아 딘 그리드에서이를 수행 할 수있는 방법이 있습니까? <vaadin-grid>으로 그렇게 할 수

Answer 1

한 가지 방법은 그리드의 activeItem 속성을 관찰 할 수 및 URL에게이 변경 때마다 업데이트 할 것입니다 :

1. activeItem 그리드 속성을 관찰을

<vaadin-grid items="[[pages]]" aria-label="Navigation Links" 
    on-active-item-changed="_onActiveItemChanged"> 

    <vaadin-grid-column> 
    <template class="header">Grid Menu</template> 
    <template>[[item.title]]</template> 
    </vaadin-grid-column> 

</vaadin-grid> 

2. 선택한 그리드 항목을 기반으로 새 경로를 정의하십시오.

,

_onActiveItemChanged(e, detail) { 
    const activeItem = detail.value; 
    if (activeItem) { 
    // if a grid item is selected 
    this.path = `/dashboard/${activeItem.id}`; 
    } 
} 

3. 갱신 <app-location path="[[path]]"></app-location> (클라이언트 측 라우팅) 경로

• 에 따라 현재의 URL.

• (서버 측 라우팅 용) window.location.pathname = this.path;.

<vaadin-grid>이 예 4를 도시하지만, 동일한 원리는 물론 격자의 다른 버전에 적용된다.