Sample page with dom-if and dom-bind in polymer

最新推荐文章于 2021-09-16 12:03:18 发布

weixin_30493321

最新推荐文章于 2021-09-16 12:03:18 发布

阅读量69

点赞数

原文链接：http://www.cnblogs.com/yoyohappy/p/4838356.html

版权

<!DOCTYPE html>
<html>
<head>
    <title>auto-binding test</title>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html"/>

</head>
<body unresolved>
<dom-module id="number-element" >
    <template>
        I'm number <span>{{number}}</span>. Click me!
        <template is="dom-if" if="{{odd}}">
            (By the way, I'm odd.)
        </template>
    </template>
    <script>
        Polymer({
            is:'number-element',
            properties: {
                number: {
                    value: 0,
                    reflectOnAttributes: true,
                    observer: "numberChanged",
                    type: Number,
                    notify: true
                },
                odd: {
                    value: false,
                    type: Boolean,
                    notify: true

                }
            },
            numberChanged: function() {
                this.odd = this.number % 2 == 1 ? true : false;
            }

        });
    </script>
</dom-module>

<template id="page-template" is="dom-bind">
    <h1><template is="auto-binding"> Demo</h1>
    <template is="dom-if" if="{{hasClicked(lastClicked)}}">
        <p>You last clicked on <span>{{lastClicked}}</span>.</p>
    </template>
    <template is="dom-repeat" items="{{numbers}}" as="item">
        <p>
            <number-element number="[[item]]" on-click="handleClick"></number-element>
        </p>
    </template>
</template>
<script>
    var template = document.querySelector('#page-template');
    template.isNumberOdd = {};
    template.numbers = [0, 1, 2, 3];
    template.handleClick = function(e) {
        template.lastClicked = e.target.number;
    };
    template.hasClicked = function(e)
    {
        if(e!=null)
            return true;
        else
            return false;
    }
</script>

</body>
</html>

转载于:https://www.cnblogs.com/yoyohappy/p/4838356.html