5

単一ページのアプリケーションを作成したい。のようなパスに移動するとlocalhost/person-info/101、page.js を使用して URL パラメーターを Polymer 要素に取得するにはどうすればよいですか?

ページを変更するためperson-infoに使用する前に、これらのパラメーターを使用して要素内のデータを選択または変更する必要がありますneon-animated-page

の内容app.js:

window.addEventListener('WebComponentsReady', function () {
    var app = document.querySelector('#app');
    page('/', home);
    page('/person-info/:user', showPersonInfo);

    page({
        hashbang: true
    });

    function home() {
        app.route = 'index';

        console.log("app route" + app.route);
        console.log("home");
    }

    function showPersonInfo(data) {
        console.log(data);
        console.log(data.params.user);

        app.params = data.params;

        app.route = 'person-info';
    }
});

そして私のPolymer要素person-info.html

<link rel="import" href="bower_components/iron-list/iron-list.html">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">

<script type="text/javascript" src="bower_components/jquery-2.1.4.min/index.js"></script>
<script src="js/app.js"></script>

<dom-module id="person-info">
    <style>
        :host {
            display: block;
            font-family: sans-serif;
            @apply(--layout-fit);
            @apply(--layout-vertical);
        }

        .toolbar {
            background: #3f78e3;   
        }

        a {
            color:#FFF;
        }
    </style>
    <template id="person-info">
        <paper-toolbar class="toolbar">
            <a href="/">
                <paper-icon-button icon="icons:arrow-back"></paper-icon-button>
            </a>

            <div>test</div>
            <div>test</div>
        </paper-toolbar>
        <content></content>
    </template>
    <script>
        Polymer({
            is: 'person-info',
            ready: function () {
                console.log("person-info page");
                this.testdd = "adisak";
                console.log("user ---->"+this.params);
                console.log(this);
            },
            properties: {
                dataindex: String
            }
        });
    </script>
</dom-module>
4

1 に答える 1

2

変数appはグローバルであるためapp.params、ルートからデータをバインドすると、app.params を使用してどこからでもアクセスできます。または、要素にアクセスして、以下のように要素のプロパティを設定するだけです

function showPersonInfo(data){
    var personInfo=document.querySelector('person-info');
    personInfo.user=data.params;
    app.route = 'person-info';
}

person-info 要素から使用してアクセスできますが、要素のプロパティでthis.userプロパティを設定する必要があると思いますuser。

于 2015-07-14T09:48:42.723 に答える