通过聚合物核心页组件指定默认的熨斗控制器路由(内部元素)
Specifying a default flatiron-director route (inside element) via polymer core-pages component
这个问题与:flatiron director/core pages SPA具有特定于路由的js函数&默认路由。我确信这个解决方案是有效的,但我对聚合物(和js)有点太缺乏经验,无法在我的情况下确定正确的事件侦听器:
如果在聚合物元素内部使用熨斗控制器,特别是当元素的模板本身不使用is="auto-binding"时,您将如何/在哪里指定适当的事件侦听器来设置默认路由。在这种情况下,需要明确的是,导入下面显示的元素的index.html页面实际上使用is="auto-binding"指定了一个模板。
以下是元素代码,用于显示我试图传达/实现的内容。熨斗路由正在工作(如果我手动在URL中输入#itemsList或#itemOpen,并使用浏览器的上一个或下一个按钮),但当它自己点击index.html时,它不会自动将默认的#items列表添加到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"
相关文章:
- 未激发路由的控制器属性上的观察者
- Ember访问公共路由/控制器mxiin中的控制器属性
- 控制器操作的路由问题
- EmberJs-将所有来自子组件的操作路由到父组件,再路由到父控制器
- 控制器和支持路由之间的角度保持选择
- 角度.js - 识别通过路由或 ng 控制器调用的控制器
- Angularjs:路由后如何调用控制器函数
- AngularJS-有条件地为路由设置控制器
- Angular JS$location.path(..)未启动路由控制器
- AngularJS路由未绑定控制器
- 在不重新加载控制器的情况下更新路由
- Ember添加了对转换调用上下文(路由/控制器)的检查
- 使用ng-include调用控制器时AngularJS路由解析
- 动态添加/注册AngularJS控制器,无需路由
- Ember.js使用Router架构获取父路由的控制器
- 在Emberjs中设置从路由到控制器的数据错误
- 余烬中嵌套路由的控制器/路由约定
- AngularJS无法从控制器路由
- 通过聚合物核心页组件指定默认的熨斗控制器路由(内部元素)
- 安贝& # 39;需要# 39;属性不能工作,除非你先访问所需的控制器路由