javascript - 通过 polymer 核心页面组件指定默认的 flatiron-director 路由(元素内部)

Question

此问题与:flatiron-director / core-pages SPA with route specific js functions & default route直接相关。我确信该解决方案有效，但我对 polymer (和 js)缺乏经验，无法在我的情况下确定正确的事件监听器:

如果在 polymer 元素内部使用 flatiron-director，特别是当元素的模板本身不使用 is="auto-binding"时，如何/在哪里指定适当的事件监听器来设置默认路由。在这种情况下，需要明确的是，导入下面所示元素的 index.html 页面实际上使用 is="auto-binding"指定了一个模板。

这是显示我试图传达/实现的内容的元素代码。 Flatiron 路由正在工作(如果我手动在 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>

Answer 1

正如 Jeff 所指出的，使用 ready() 生命周期方法作为元素内等效于元素外部的 template-bound 事件。所以......基于上面的例子，它就像在 polymer 元素的ready()中包含以下行一样简单:

this.route = this.route || "itemsList"