polymer中的notify和reflectToAttribute

最新推荐文章于 2024-09-11 18:01:31 发布

weixin_34049948

最新推荐文章于 2024-09-11 18:01:31 发布

阅读量163

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/2391658/blog/1113886

版权

2019独角兽企业重金招聘Python工程师标准>>>

notify and reflectToAttribute. The notify and reflectToAttributeproperties may sound similar: they both make the element's state visible to the outside world. reflectToAttribute makes the state visible in the DOM tree, so that it's visible to CSS and thequerySelector methods. notify makes state changes observable outside the element, either using JavaScript event handlers or Polymer two-way data binding.

用实例演示一下两者的区别。以下代码仅适用于polymer 1.0。

icon-toggle.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">

<dom-module id="icon-toggle">

  <template>

    <style>
      /* local styles go here */
      :host {
        display: inline-block;
      }
    iron-icon {
      fill: var(--icon-toggle-color, rgba(0,0,0,0));
      stroke: var(--icon-toggle-outline-color, currentcolor);
    }
    :host([pressed]) iron-icon {
      fill: var(--icon-toggle-pressed-color, currentcolor);
    }
    </style>

    <!-- local DOM goes here -->
<iron-icon icon="[[toggleIcon]]"/>
  </template>

  <script>
  Polymer({
    /* this is the element's prototype */
    is: 'icon-toggle',
    properties: {
      toggleIcon: String,
      pressed: {
        type: Boolean,
        value: false,
        notify: true,
        reflectToAttribute: true
      }
    },
    listeners: {
      'tap': 'toggle'
    },
    toggle: function() {
      this.pressed = !this.pressed;
    },
  });
  </script>

</dom-module>

icon-toggle-demo.html

<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../icon-toggle.html">


<dom-module id="icon-toggle-demo">
  <template>
    <style>
      :host {
        font-family: sans-serif;
        --icon-toggle-color: lightgrey;
        --icon-toggle-outline-color: black;
        --icon-toggle-pressed-color: red;
      }
    </style>
  
    <h3>Statically-configured icon-toggles1</h3>
    
    <icon-toggle toggle-icon="star"></icon-toggle>
    <icon-toggle toggle-icon="star" pressed></icon-toggle>
    
    <h3>Data-bound icon-toggle</h3>
    <div><input type="text" value="{{ival}}"></input></div>
    <span>[[ival]]</span>
    <!-- use a computed binding to generate the message -->
    <div><span>[[message(isFav)]]</span></div>

    <!-- curly brackets ({{}}} allow two-way binding --> 
    <icon-toggle toggle-icon="favorite" pressed="{{isFav}}"></icon-toggle>
  </template>
  
  <script>
    Polymer({
      is: "icon-toggle-demo",
      properties:{
        ival:{
          type:String,
          value:"test",
          notify:true
        }
      },
      message: function(fav) {
        if (fav) {
          return "You really like me!";
        } else {
          return "Do you like me?";
        }
      }
    });
  </script>
</dom-module>

测试页面：

<!doctype html>
<html>
  <head>
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
    <script>
      /*
      window.Polymer = window.Polymer || {};
      window.Polymer.dom = 'shadow';
      */
    </script>
    <link rel="import" href="icon-toggle-demo.html">
  </head>
  <body>
    <icon-toggle-demo></icon-toggle-demo>
  </body>
</html>

执行效果：