как реализовать маршрутизацию в полимере 3 с помощью app-route
Собственно, это именно то, чего вы ожидаете. Давайте разложим, что здесь происходит:
Вы пишете
lst = [[1] * 4] * 3
Это эквивалентно:
lst1 = [1]*4
lst = [lst1]*3
Это означает, что lst - это список с 3 элемента, указывающие на lst1. Это означает, что две следующие строки эквивалентны:
lst[0][0] = 5
lst1[0] = 5
Поскольку lst[0] - это только lst1.
Чтобы получить желаемое поведение, вы можете использовать понимание списка:
lst = [ [1]*4 for n in xrange(3) ]
В этом случае выражение переоценивается для каждого n, что приводит к другому списку.
1 ответ
Вам необходимо иметь
app-route : для реализации маршрутизации
Железные страницы : в основном переключатель страниц для загрузки требуемого компонента на спрос
в app-route.,
/* observer: Its a simple observer (basically a watch which holds current value & old value) that triggers whenever data changed in page property. We read the observer and calls a function to grab its earlier */
static get properties() {
return {
page:{
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
};
}
_pageChanged(currentPage, oldPage){
console.log('CURRENT - ', currentPage);
console.log('OLD - ', oldPage);
switch(currentPage){
case 'home':
import('./home-comp.js').then()
break;
case 'about':
import('./about-comp.js').then()
break;
case 'contact':
import('./contact-comp.js').then()
break;
default:
this.page = 'home';
}
}<!-- pattern: reads the href property., hence set the page (pattern="/:page") property in static get property to read its data -->
<app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subroute}}"></app-route>
<ul>
<li>
<a href="/home">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul> Но для первой загрузки., свойство страницы не содержит никакого значения и выдает undefined.
Следовательно, мы можем использовать complex observer для наблюдения за такими изменениями
static get observers(){
return ['_routerChanged(routeData.page)'];
}
_routerChanged(page){
console.log('CHANGED PAGE - ', page);
this.page = page || 'home';
} Измененные данные маршрута не загружают компоненты, если только у нас есть iron-pages. В основном это компонентный переключатель / загрузчик по требованию. Оберните все компоненты в main-app в <iron-pages>
<!-- selected: Data binding helps to get changed page value -->
<!-- attr-for-selected: It reads value of name attr defined in each component & matches with selected value and triggers page switch -->
<!-- fallback-selection: for 404., page/component not found handling -->
<iron-pages selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
<home-comp name="home"></home-comp>
<about-comp name="about"></about-comp>
<contact-comp name="contact"></contact-comp>
</iron-pages>Вот полное руководство по реализации маршрутизации в полимере 3 с использованием приложение-маршрут. Надеюсь, это поможет нажмите здесь