更改霓虹页时加载数据

时间:2016-09-06 07:59:57

标签: ajax polymer-1.0

我是Polymer的新手,我尝试使用Polymer和Cordova进行移动应用。 我使用霓虹动画页面来制作漂亮的动画,现在我有一些关于iron-ajax的问题​​。当我在localhost:8080上打开浏览器项目时,我的所有页面都已加载,如果我更改了页面,我想制作iron-ajax请求。我怎么能这样做?

示例index.html

<dom-module id="my-app">
<template>
    <style>
        // some style
    </style>
    <app-header-layout fullbleed>
        <app-header>
            <app-toolbar>
                <div main-title>Title</div>
                <paper-input label="page" value="{{page::change}}"></paper-input>
                <paper-icon-button icon="menu"></paper-icon-button>
        </app-header>
        <div class="content">
            <neon-animated-pages id="page"
                                 selected="{{page}}" 
                                 attrForSelected="index" 
                                 entry-animation="slide-from-right-animation" 
                                 exit-animation="slide-left-animation">
                <neon-animatable index="0"><login-app name="login"></login-app></neon-animatable>
                <neon-animatable index="1"><profile-page name="profile"></profile-page></neon-animatable>
                <neon-animatable index="2"><secondary-page name="secondary"></secondary-page></neon-animatable>
            </neon-animated-pages>
        </div>
            <footer>
                &copy; Polymer project
            </footer>

        </app-header-layout>
</template>
<script>
    Polymer({
        is: 'my-app',
        behaviors: [GlobalsBehaviour],
        properties: {
            page: {
                type: Number,
                reflectToAttribute: true,
                value: 0
            }
        }
    });
</script>

例如一些带有铁阿贾克斯的页面:

<dom-module id="secondary-page">
<template>
    <style>
        :host {
            display: block;
        }
    </style>
    <div>secondary PAGE</div>
    <div>Var value - {{my}}</div>
    <iron-ajax
                id="login"
                url="https://www.some.url/"
                method="get"></iron-ajax>
</template>
<script>
    Polymer({
        is: 'secondary-page',
        properties: {
            my: {
                type: String,
                value: 'my'
            }
        }
    });
</script>

0 个答案:

没有答案