公开 property

当你公开一个 Polymer 元素的 property 名字时,就等于把这个 property 设置为公开API了。公开 property 会有如下的特性:

  • 支持声明数据双向绑定
  • 通过声明,property 将会按照名称一样的 html attribute 初始化数据
  • property 的值可以反射到元素对应的attribute上

注: property 名称是大小写区分的,但是 attribute 却不是。polymer 将会把 property 和 attribute 一一对应,所以你不能声明两个只有大小写区别的 attribute(比如:name 和 NAME);

有两种方法可以绑定 property :

  • 将property名放在polymer-element元素attributes attribute里
  • 将property名放在构造原型的publish

举个例子,这里一个元素,通过设置attributes来设置三个公开的property,foo,bar,baz

<polymer-element name="x-foo" attributes="foo bar baz">
<script>
Polymer('x-foo');
</script>
</polymer-element>

下面这个例子用到了publish

<polymer-element name="x-foo">
<script>
Polymer('x-foo', {
publish: {
foo: 'I am foo!',
bar: 5,
baz: {
value: false,
reflect: true
}
}
});
</script>
</polymer-element>

主要注意的是baz使用了不同的声明方法来开启 attribute 反射功能。

一般来说,我们更建议使用attributes,因为这是声明式的,而且开发者可以很容易的通过元素标签来看到所有元素暴露出来的API。

只有以下情况,我们才建议使用publish式声明:

  • 元素公开的property太多,把所有property名放在attributes会显得有点奇怪。
  • 需要设置property的初始值。
  • 你需要设置attribute到property之间的反射

property 的默认值

默认情况下,在attributes里设置的property的值为null

<polymer-element name="x-foo" attributes="foo">
<script>
// x-foo 有一个名称为 foo 的 property ,默认值为 null
Polymer('x-foo');
</script>
</polymer-element>

polymer会将foo添加到元素prototype上,并设置为null

你可以通过在元素的prototype上显式property的默认值。

<polymer-element name="x-foo" attributes="bar">
<script>
Polymer('x-foo', {
// x-foo 有一个名称为 bar 的 property ,默认值为 false
bar: false
});
</script>
</polymer-element>

或者可以全部移到publish里:

<polymer-element name="x-foo">
<script>
Polymer('x-foo', {
publish: {
bar: false
}
});
</script>
</polymer-element>

如果property的默认值为object或者array的时候,则需要放在created里初始化,这样就保证了在不同的实例里值的引用都不同。

<polymer-element name="x-default" attributes="settings">
<script>
Polymer('x-default', {
created: function() {
// create a default settings object for this instance
this.settings = {
textColor: 'blue';
};
}
});
</script>
</polymer-element>

通过设置 attribute 来配置元素

Attribute 为我们提供了一种简单的方法来直接配置元素。我们可以通过设置attribute为元素提供一个初始值,从而来自定义它。

<x-foo name="Bob"></x-foo>

如果元素的property不是字符串,那么polymer会自动判断它的类型,并将其转换为合适的格式。

除非开启了attribute反射,否则Attribute到property的连接是单向的,property改变并不会影响到attribute。

注:不要将数据绑定和attribute配置混淆。数据绑定是引用式的,这就意味着值并不会被序列化和反序列化。

探测property类型

Polymer会根据property的默认值,来判断它的类型,并将相绑定的attribute转换为此类型。

例如一个元素x-hint有一个property名为count,默认值为0

<x-hint count="7"></x-hint>

因为count的默认值为0,所以polymer将字符串"7"转换成了数字7

如果一个property是对象或者数组,则我们可以用JSON字符串来表示它。

<x-name fullname='{ "first": "Bob", "last": "Dobbs" }'></x-name>

这就相当于在JS里设置元素的propertyfullname

xname.fullname = { first: 'Bob', last: 'Dobbs' };

我们可以在publish或者created回调中设置默认值。下面这个元素使用了三种方法。

<polymer-element name="hint-element" attributes="isReady items">

<script>
Polymer('hint-element', { // hint that isReady is a Boolean
isReady: false, publish: {
// hint that count is a Number
count: 0
}, created: function() {
// hint that items is an array
this.items = [];
}
});
</script> </polymer-element>

重要:对于类型为对象或者数组的property,应该始终在created回调中初始化。如果直接在构造原型上设置默认值的话,那么在不同的实例里就会遇到 "shared state" 错误。

Property 反射到 Attribute

Property的值可以反射到对应的Attribute上。例如,如果在一个元素上开启了对name的反射,那么this.name="Joe"的效果就等于 this.setAttribute('name','Joe'),元素将会自动的更新DOM。

<x-foo name="Joe"></x-foo>

Property 反射只在某些特殊的场景有用,所以它默认是关闭的,它最常用的地方就是用attribute来控制元素的样式。

待续...

Polymer API开发指南 (二)(翻译)的更多相关文章

  1. 【转】Polymer API开发指南 (二)(翻译)

    原文转自:http://segmentfault.com/blog/windwhinny/1190000000596258 公开 property 当你公开一个 Polymer 元素的 propert ...

  2. 【转】Polymer API开发指南 (一)(翻译)

    原文转自:http://segmentfault.com/blog/windwhinny/1190000000592324 翻译的不好,轻拍 Polymer是google的一款前端开发框架,其基于Sh ...

  3. Spark Streaming和Kafka整合开发指南(二)

    在本博客的<Spark Streaming和Kafka整合开发指南(一)>文章中介绍了如何使用基于Receiver的方法使用Spark Streaming从Kafka中接收数据.本文将介绍 ...

  4. 谷歌拼音输入法扩展API开发指南

    为了帮助开发者在谷歌拼音输入法的基本输入功能基础上,开发和定义更丰富的扩展输入功能,谷歌拼音输入法提供了以Lua脚本编程语言为基础的输入法扩展API.利用输入法扩展API,开发者可以编写自定义的输入功 ...

  5. Web报表工具FineReport的JS API开发(二)

    上次介绍FineReport的JS API中的第一类开发--FR,这次就来介绍一下FS和contentWindow类的开发. 1 FS FS是数据决策系统中的js接口,比如说FS.tabPane.ad ...

  6. 百度地图API开发指南

    简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...

  7. Google maps API开发(二)(转)

    这一篇主要实现怎么调用Google maps API中的地址解析核心类GClientGeocoder: 主要功能包括地址解析.反向解析.本地搜索.周边搜索等, 我这里主要有两个实例: 实例一.当你搜索 ...

  8. CTP API 开发之二 :制作CTP java版 API

    目前上期技术CTP系统提供的API版本是C++版本 SWIG是一个能将C/C++接口转换为其他语言的工具,目前可以支持Python,Java,R等语言. 本文主要介绍Windows 32/64位平台下 ...

  9. 来自HeroKu的HTTP API 设计指南(中文版)

    原文转自:http://get.jobdeer.com/343.get 来自HeroKu的HTTP API 设计指南(中文版) 翻译 by @Easy 简介 本指南中文翻译者为 @Easy ,他是国内 ...

随机推荐

  1. MySQL索引下推,原来这么简单!

    大家好,我是大彬~ 今天给大家分享MySQL的索引下推. 什么是索引下推 索引条件下推,也叫索引下推,英文全称Index Condition Pushdown,简称ICP. 索引下推是MySQL5.6 ...

  2. 深入Mybatis框架

    深入Mybatis框架 学习了Spring之后,我们已经了解如何将一个类作为Bean交由IoC容器管理,也就是说,现在我们可以通过更方便的方式来使用Mybatis框架,我们可以直接把SqlSessio ...

  3. JZ-054-字符流中第一个不重复的字符

    字符流中第一个不重复的字符 题目描述 请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是"g&q ...

  4. 【Apollo自动驾驶源码解读】车道线的感知和高精地图融合

    模式选择 在modules/map/relative_map/conf/relative_map_config.pb.txt文件中对模式进行修改: lane_source: OFFLINE_GENER ...

  5. mysql中MyISAM与InooDB存储引擎的区别

    MyISAM存储引擎特点 不支持事务 表级锁定 读写相互阻塞,写入不能读,读时不能写 只缓存索引 不支持外键约束 不支持聚簇索引 读取数据较快,占用资源较少 不支持MVCC(多版本并发控制机制)高并发 ...

  6. dedeCMS自定义dede标签

    在include/taglib文件夹中新建文件hlh.lib.php,其中hlh也就是你标签的名字,function的名字也必须跟文件名对应,固定格式lib_标签名,如lib_hlh,本例子以调取文章 ...

  7. tensorflow源码解析之common_runtime-direct_session

    目录 核心概念 direct_session direct_session.h direct_session.cc 1. 核心概念 读过之前文章的读者应该还记得,session是一个执行代理.我们把计 ...

  8. c++ 11 线程池---完全使用c++ 11新特性

    前言: 目前网上的c++线程池资源多是使用老版本或者使用系统接口实现,使用c++ 11新特性的不多,最近研究了一下,实现一个简单版本,可实现任意任意参数函数的调用以及获得返回值. 0 前置知识 首先介 ...

  9. AVCaptureSession部分用法

    原文链接 AVCaptureSession阻塞主线程问题 前阵子程序中出现了一个奇怪的 bug,在 iOS 系统上,页面弹出的时候会卡很久,相机始终黑屏,大概6-7秒钟,跟踪具体每个步骤花费时间的时候 ...

  10. Linux命令 之 “救命稻草”

    一.前言 虽然Linux操作系统图形界面已经退出,但由于大量的操作在终端操作比较快捷,所以,对linux命令的使用必不可少.在linux系统日常的学习和工作中,常常会出现有些命令忘记了或者该命令的参数 ...