Question

我想使用app-router传递所选网格的ID。不知何故，我似乎错过了一个链接。我希望能够从网格中传递所选行的id，并在evaluateId中使用iron-ajax url http://192.168.178.31:8080/demo/questions?assessmentId=TEST中的该值。

MY-data.html

<dom-module id="my-data">
    <template>
        <style include="shared-styles">
            :host {
                display: block;

                padding: 10px;
            }

            .title {
                margin-left: 40%;
            }

            .card {
                height: 100%;
            }
        </style>
        <div class="card">
            <div class="title">ASSESSMENTS</div>

            <!-- Fetch an array of users to be shown in the grid -->

                <vaadin-grid id="material" items="{{assessments}}" selected-items={{selectedItems}} active-item="{{selectedItem}}">

                    <vaadin-grid-selection-column auto-select frozen>
                    </vaadin-grid-selection-column>

                    <vaadin-grid-column>
                        <template class="header">Assessment Id</template>
                        <template>[[item.assessmentId]]</template>
                    </vaadin-grid-column>

                    <vaadin-grid-column>
                        <template class="header">Assessment Topic</template>
                        <template>[[item.assessmentTopic]]</template>
                    </vaadin-grid-column>

                    <vaadin-grid-column>
                        <template class="header">Assessment Subtopic</template>
                        <template>[[item.assessmentSubtopic]]</template>
                    </vaadin-grid-column>

                    <vaadin-grid-column>
                        <template class="header">Created By</template>
                        <template>[[item.createdBy]]</template>
                    </vaadin-grid-column>

                    <vaadin-grid-column>
                        <template class="header">Rating</template>
                        <template>[[item.rating]]</template>
                    </vaadin-grid-column>
                </vaadin-grid>


            <app-location route="{{route}}" url-space-regex="^[[rootPath]]">
            </app-location>
            <app-route route="{{route}}" 
            pattern="[[rootPath]]:page" 
            data="{{routeData}}" 
            tail="{{subroute}}">
            </app-route>

            <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
                    <a name="assessment" href="[[rootPath]]assessment">Quiz Page</a>
            </iron-selector>

        </div>

    </template>

    <script>

        class MyData extends Polymer.Element {
            static get is() { return 'my-data'; }

            static get properties() {
                return {
                    index: {
                        type: Number,
                        value: 0
                    },
                    assessments: {
                        type: Array,
                        observer: 'isAssessmentLoaded'
                    },
                    selectedItem: {
                        type: Array,
                    },
                    selectedItems: {
                        type: Array,
                    },
                    page: {
                        type: String,
                        reflectToAttribute: true,
                        observer: '_pageChanged',
                    },
                    routeData: Object,
                    subroute: String,
                    // This shouldn't be neccessary, but the Analyzer isn't picking up
                    // Polymer.Element#rootPath
                    rootPath: String,
                };
            }
            constructor() {
                super();
            }

            _selectedItemsChanged(selectedItem, selectedItems) {
                console.log(selectedItems);
                this.selectedItem = selectedItem;
            }

            isAssessmentLoaded(q) {
                if (q) {
                    console.log('loaded questions', q); // questions are loaded.
                }
            }

            redirect() {
                page('/')
            }

            static get observers() {
                return [
                    //'_routePageChanged(routeData.page)',
                    '_selectedItemsChanged(selectedItem, selectedItems)'
                ];
            }

            // _routePageChanged(page) {
            //     // If no page was found in the route data, page will be an empty string.
            //     // Default to 'assessments' in that case.
            //     this.page = page | 'assessment';

            //     // Close a non-persistent drawer when the page & route are changed.
            //     // if (!this.$.drawer.persistent) {
            //     //     this.$.drawer.close();
            //     // }
            // }

            // _pageChanged(page) {
            //     // Load page import on demand. Show 404 page if fails
            //     var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
            //     Polymer.importHref(
            //         resolvedPageUrl,
            //         null,
            //         this._showPage404.bind(this),
            //         true);
            // }

            _showPage404() {
                this.page = 'view404';
            }
        }

        window.customElements.define(MyData.is, MyData);

    </script>
</dom-module>

MY-assessment.html

<dom-module id="my-assessment">

    <template>          
            <style include="shared-styles">
                    :host {
                      display: block;

                      padding: 10px;
                    }
                  </style>

        <!--Check the url is correct ! And last responce property should be {{}} instead [[]] (as up way data binding) -->
        <iron-ajax
            id="requestRepos"
            url="http://192.168.178.31:8080/demo/questions?assessmentId=TEST"
            handle-as="json"
            last-response="{{repos}}">
        </iron-ajax>

        <template is="dom-if" if="{{repos}}">
                <my-quiz repos= "{{repos}}"></my-quiz>
        </template>

    </template>
    <script>
        class Assessment extends Polymer.Element {
            static get is() { return 'my-assessment'; }

            constructor() {
                super();
            }

            ready() {
                super.ready();
                this.$.requestRepos.generateRequest();
            }    
        }
        window.customElements.define(Assessment.is, Assessment);
    </script>
</dom-module>

Answer 1

以下是点击链接更改路线的方法：

     <app-location 
         route="{{route}}" 
         use-hash-as-path="">
     </app-location>
    <app-route 
        route="{{route}}" 
        pattern="/:page" 
        data="{{routeData}}" 
        tail="{{subroute}}">
    </app-route>

<a name="some_name" href="#/some_route">Change route</a>

使用聚合物中的app路径传递数据

1 个答案: