polymer中的notify和reflectToAttribute

原创
2017/07/02 08:59
阅读数 408

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>

执行效果:

效果影响:

1、如果在icon-toggle中去除:reflectToAttribute: true,则点击图标时,填充效果将无效,但msg效果是有效的,即仍会在:You really like me! 和 Do you linke me?之间切换。

2、如果去除:notify: true 属性,则填充效果有效,但msg的切换效果则会消失。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部