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


    <!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>
    

      

  • 相关阅读:
    反编译工具
    3.25Java变量
    标识符
    OMS系统
    java打印方法区别
    注释
    写代码时候要注意的两个点
    python_pracyoce_day1
    SKU和SPU
    文档注释
  • 原文地址:https://www.cnblogs.com/yoyohappy/p/4838356.html
Copyright © 2020-2023  润新知