[英]Specifying a default flatiron-director route (inside element) via polymer core-pages component
這個問題直接相關: 具有路由特定js函數和默認路由的flatiron-director / core-pages SPA 。 我確定該解決方案有效,但是在我的情況下,我對Polymer(和js)缺乏經驗,因此無法確定正確的事件偵聽器:
如果在聚合物元素內部使用了熨斗導向器,則將如何/在何處指定適當的事件偵聽器以設置默認路由,尤其是在元素的模板本身不使用is =“ auto-binding”的情況下。 在這種情況下(很明顯),導入以下所示元素的index.html頁面實際上確實使用is =“ auto-binding”指定了一個模板。
這是顯示我正在嘗試傳達/實現的內容的元素代碼。 熨斗路由有效(如果我手動在URL中輸入#itemsList或#itemOpen並使用瀏覽器的上一個或下一個按鈕),但是當單獨點擊index.html時,它不會自動將默認的#itemsList添加到URL:
<polymer-element name="my-app" attributes="user items connected">
<template>
<flatiron-director id="page-director" route="{{route}}" autoHash on-director-route="{{ routeChanged }}"></flatiron-director>
<!-- HIGH LEVEL APP LAYOUT ELEMENT -->
<core-header-panel id="appHeader" mode="standard">
<!-- OUTER APP TOOLBAR ELEMENT -->
<core-toolbar id="appToolbar">
<paper-icon-button id="navicon" icon="arrow-back" on-tap="{{ showItems }}"></paper-icon-button>
<span flex>App Name</span>
<paper-icon-button id="searchbutton" icon="search"></paper-icon-button>
</core-toolbar>
<!-- MAIN CONTENT ELEMENTS -->
<!-- ATTEMPT FLATIRON ROUTING -->
<core-pages id="mainPages" selected="{{route}}" valueattr="name">
<my-items-element name="itemsList" on-core-activate="{{ itemSelect }}" user="{{user}}" items="{{items}}" item="{{item}}"></my-items-element>
<item-open-scaffold-element name="itemOpen" user="{{user}}" item="{{item}}" hidden></item-open-scaffold-element>
</core-pages>
</core-header-panel>
</template>
<script>
Polymer('my-app', {
route: "itemsList",
itemSelect: function(e, detail, sender) {
if (sender.shadowRoot.activeElement == null || sender.shadowRoot.activeElement.nodeName != "PAPER-MENU-BUTTON"){
// Ensure the user hasn't clicked on the item menu dropdown to perform alternative actions (or another element with actions for that matter)
// (i.e. make sure the user intends to open the item)
this.openItem();
}
},
openItem: function() {
this.$.mainPages.children.itemOpen.hidden = false;
this.$.mainPages.selected = "itemOpen";
//this.route = "scaffoldPage";
},
showItems: function() {
this.$.mainPages.children.itemOpen.hidden = true;
this.$.mainPages.selected = "itemsList";
}
});
</script>
<script>
var template = document.querySelector('template');
template.addEventListener('template-bound', function() {
this.route = this.route || "itemsList";
});
</script>
如Jeff所述,將ready()
生命周期方法用作等效於元素外部template-bound
事件的元素內元素。 所以...根據上面的示例,它就像在聚合物元素的ready()中包含以下行一樣簡單:
this.route = this.route || "itemsList"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.