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

原文转自:http://segmentfault.com/blog/windwhinny/1190000000596258

公开 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来控制元素的样式。

待续...

时间: 2024-10-09 05:07:48

【转】Polymer API开发指南 (二)(翻译)的相关文章

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

原文转自:http://segmentfault.com/blog/windwhinny/1190000000592324 翻译的不好,轻拍 Polymer是google的一款前端开发框架,其基于Shadow DOM.Custom Elements.MDV等最新浏览器特性构建,代表了下一代Web框架的方向:一切皆组件.尽量减少代码量.尽量减少框架限制. 名词解释 Attribute: 元素声明或者创建时需要的属性. Property: 属性.元素或者类向外提供的数据区域,例如js对象的属性. P

WatchKit-Programming-Guide-Apple-Watch开发指南官方翻译及总结

鉴于CSDN的Markdown很多bug,大家请看这里: WatchKit-Programming-Guide-Apple-Watch开发指南官方翻译及总结 Overview ### Developing for Apple Watch Apple Watch可以让用户以一种很私密,不招摇的样式查看信息(官方文档是这样的哈,但是我想大多数人不会不招摇的查看Apple Watch上的信息??).用户可以在不拿出手机的情况下,通过查看Apple Watch快速的获取重要的信息. Apple Watc

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

上次介绍FineReport的JS API中的第一类开发--FR,这次就来介绍一下FS和contentWindow类的开发. 1 FS FS是数据决策系统中的js接口,比如说FS.tabPane.addItem,先介绍几类操作: 1.1 FS.Trans.signOut() 退出决策平台系统 1.2 FS.tabPane._doCloseTab(FS.tabPane._getSelectedTab()) 关闭当前决策平台的标签 1.3 FS.tabPane.addItem({title:"bai

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

目前上期技术CTP系统提供的API版本是C++版本 SWIG是一个能将C/C++接口转换为其他语言的工具,目前可以支持Python,Java,R等语言. 本文主要介绍Windows 32/64位平台下利用Swig工具将CTP C++接口API转换为Java可调用的接口. 1.从CTP官网下载最新API包,包中包含32位和64位.API文件包清单: 2.下载安装Swig软件: 3.在API文件包中创建thostapi.i 和various.i文件,thostapi.i是一个接口文件,用于告诉swi

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

原文转自:http://get.jobdeer.com/343.get 来自HeroKu的HTTP API 设计指南(中文版) 翻译 by @Easy 简介 本指南中文翻译者为 @Easy ,他是国内首家互联网人才拍卖网站 JobDeer.com 的创始人.转载请保留本信息. 本指南描述了一系列 HTTP+JSON API 的设计实践, 来自并展开于 Heroku Platform API 的工作.本指南指导着Heroku内部API的开发,我们希望也能对Heroku以外的API设计者有所帮助.

AutoCAD二次开发&mdash;&mdash;AutoCAD.NET API开发环境搭建

AutoCAD二次开发--AutoCAD.NET API开发环境搭建 AutoCAD二次开发--AutoCAD.NET API开发环境搭建 AutoCAD二次开发工具:1986年AutoLisp,1989年ADS,1990年DCL,1993年ADS-RX,1995年ObjectARX,1996年Active X Automation(COM),1997年VBA,1998年Visual Lisp,2006年.net API(DLL). 趋势和方向:AutoCAD.net API(AutoCAD20

融云IM 基础服务开发指南WebIMLib API 示例 【干货】

Web SDK API 示例 简介 融云 Web SDK API 用法及常见异常总结,为了方便刚接触融云 Web SDK 开发者朋友们写下此文档,希望可以帮到你们. 说明: 1.函数参数中使用 [] 为可选参数(数组除外). 2.**** => **** 在本文档中表示为示例代码和结果,例:1+2 => 3. 初始化 初始化 SDK 执行初始化需要在开发者后台新建应用得到 AppKey 和 token,初始化代码: RongIMLib.RongIMClient.init(appkey,[dat

[PC]PHPCMS二次开发指南(上)

------------------------------------------------------------------------------------- PHPCMS本身功能已经很完善,自带的模块可用可不用,松耦合特性使其非常适合企业的二次开发. PC的默认路由在 phpcms/caches/configs/route.php 中定义,为content模块下index控制器的init方法 一. PC所有模块都在module目录下,与数据表名字相同: module目录中文件就是控

握手API网关(7)开发指南-API参考

一.简介 用户可以使用开发指南介绍的 API 对 API 网关服务进行相关操作. 术语表 术语 全称 中文 说明 Region   地域 用户开放API,需选择API在API网关的部署地域,建议选择与后端服务相同的Region. API   应用程序编程接口 用户开放API,在API网关录入API,以提供接口的方式对外提供服务或者数据. Group API Group API分组 一组API. 用户开放API,首先需要创建API分组 每个API分组拥有一个二级域名,两个Stage 用户需要将已经