文档章节

Polymer1.0 监听属性值的变化

孟飞阳
 孟飞阳
发布于 2018/05/02 09:58
字数 485
阅读 13
收藏 0

如果需要监听属性值变化可以通过给observer赋值一个回调函数。

<say-Hello></say-Hello>
<dom-module id="say-Hello">
  <template>
    <h1>{{say}}</h1>
  </template>
</dom-module>
<script>
  Polymer({
    is:'say-Hello',
    properties:{
      say:{
        type:String,
        value:'hello',
        observer:'attrChange'
      }
    },
    listeners:{
      'click':'setAttr'
    },
    setAttr:function(){
      this.say = 'attr';
    },
    attrChange:function(){
      console.log('属性值已改成' + this.say);
    }
  })
</script>

当属性值发生改变时,就会触发这个回调函数,注意只有你一开始写了value这个属性就会触发一次,另外如果值没有改变也是不会执行的。

可以在listeners里面写事件,值为一个回调函数,写法和js一样,去掉on。

另外发现attrChange函数里面的第一个值为say

attrChange:function(e){
  console.log(e);
  console.log('属性值已改成' + this.say);
}

这种方法只能观察一个属性,如果需要观察多个属性的变化,可以用更为复杂的observers

 

<say-Hello></say-Hello>
<dom-module id="say-Hello">
  <template>
    <h1>{{userName}}</h1>
  </template>
</dom-module>
<script>
  Polymer({
    is:'say-Hello',
    properties:{
      userName:String,
      age:Number,
      sex:String
    },
    attached:function(){
      this.userName = '老王';
      this.age = 25;
      this.sex = '男';
    },
    observers:[
      'updataSay(userName,age,sex)'
    ],
    updataSay:function(userName,age,sex){
      console.log(userName,age,sex);
    }
  })
</script>

observers值是一个数组,数组里面可以写回调函数, 'updataSay(userName,age,sex)'意思是当userName&&age&&sex都改变的时候才会执行这个方法。

如果只需要监听agesex改变时就发生可以这样写。

updataSay(age,sex)

如果只写一个,那么和observer是一样的。

监听一个对象的属性变化

<say-Hello></say-Hello>
<dom-module id="say-Hello">
  <template>
    <input value="{{user.name::input}}">
  </template>
</dom-module>
<script>
  Polymer({
    is:'say-Hello',
    properties:{
      user: {
        type: Object,
        value: function() {
          return {'name':'请输入内容'};
        }
      }
    },
    observers:[
      'userNameChanged(user.name)'
    ],
    userNameChanged: function(name) {
      console.log('new name: ' + name);
    }
  })
</script>

监听数组的值变化

<x-custom></x-custom>
<script>
  Polymer({
    is: 'x-custom',
    properties: {
      users: {
        type: Array,
        value: function() {
          return [];
        }
      }
    },
    observers: [
      'usersAddedOrRemoved(users.splices)'
    ],
    usersAddedOrRemoved: function(changeRecord) {
      if(!changeRecord)return;
      console.log(changeRecord);
    },
    ready: function() {
      this.push('users', {name: "Jack Aubrey"});
    },
  });
</script>

通过传递splices我们可以查看数组里面的详细信息

index:指数,push的当前值
removed: 删除的数量
addedcount:插入的项目数。
object:项目
type:类型

本文转载自:http://www.cnblogs.com/pssp/p/5925524.html

共有 人打赏支持
孟飞阳
粉丝 212
博文 998
码字总数 550537
作品 5
朝阳
个人站长
私信 提问
polymer1.0 样式(2)

跨作用域的样式 背景 对于Webcomponent而言,Shadow Dom 带来了很多作用域以及样式封装之类的好处,使得组件在CSS影响范围上变得更加安全和简单。样式不会被上层的组件介入影响,更不会被内层...

孟飞阳
2018/05/02
0
0
Vue进阶(三十五):vue中watch的详细用法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/86700833 在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代...

Lo秀娴ve
01/30
0
0
【MVVM】- Avalon 属性监控、解除监控、子孙元素监控、统一属性监控

Avalon 属性监控 $watch:属性值改变就会改变 监听当前的vm第1层的监控属性与计算属性 多个属性监听可以使用同一个$watch监听 通过监听$all可得知所有的属性变动状况 如果属性是对象,监听该对...

ZeroneLove
02/28
0
0
【Vue.js 牛刀小试】05:第五章 - 计算属性与监听器

前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作。当我们需要对...

墨墨墨墨小宇
2018/11/09
0
0
angular2 组件之间传参数

将登陆框的用户名和密码传递到子组件,正确写法: Name: <input [(ngModel)]="username" class="form-control"><br>Password: <input [(ngModel)]="password" class="form-control"><button ......

今天来找bug
2016/10/13
3K
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx反向代理配置去除前缀

使用nginx做反向代理的时候,可以简单的直接把请求原封不动的转发给下一个服务。设置proxy_pass请求只会替换域名,如果要根据不同的url后缀来访问不同的服务,则需要通过如下方法: 方法一:...

架构师springboot
23分钟前
1
0
QianBill API 开发笔记

JWT

BeanHo
34分钟前
3
0
Elasticsearch实战篇——Spring Boot整合ElasticSearch

当前Spring Boot很是流行,包括我自己,也是在用Spring Boot集成其他框架进行项目开发,所以这一节,我们一起来探讨Spring Boot整合ElasticSearch的问题。 本文主要讲以下内容: 第一部分,通...

JAVA_冯文议
43分钟前
3
0
不错的linux下通用的java程序启动脚本

#!/bin/sh#该脚本为Linux下启动java程序的通用脚本。即可以作为开机自启动service脚本被调用,#也可以作为启动java程序的独立脚本来使用。##Author: tudaxia.com, Date: 2011/6/7...

sprouting
今天
3
0
Linux manjaro系统安装后无法连接wifi,解决方案

笔记本为联想 thinkpad E480 首先通过命令lspci -k看一下原因是否为缺少wifi驱动,如下,如果没有Kernel driver in use,说明缺少驱动。 05:00.0 Network controller: Realtek Semiconducto...

bluecoffee
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部