Polymer——Template

【Polymer——Template】的更多相关文章

Polymer Template 一.Ta的简介 template是polymer element中一个重要的组成部分,主要有两种使用目的,一是构建Shadow Dom,二是用于数据绑定和视图渲染. 1.可以在template里面放置css.html代码,<template>标签外的,html标记不会被渲染出来. 在这里通过link方式引入的css文件,会被放到<style shim-shadowdom-css>标签里面,简单说来就是,不区分外联,内联,都按内联处理,这个标签在he…

前端组件化Polymer入门教程(8)——事件

可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> <template> <div>I will respond</div> <div>to a tap on</div> <div>any of my children!</div> <div id="special&…

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

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

[Polymer] Custom Elements: Styling

Code: <dom-module id="business-card"> <template> <div class="card"> <h1>Joe Maddalone</h1> <h2>Instructor</h2> <h3>egghead.io</h3> </div> <style> .card{ background-color…

[Polymer] Introduction

install Polymer and explore creating our first custom element: bower install polymer index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Polymer</title> <script src=&…

第一个Polymer应用 - (4)收尾工作

原文链接: Step 4: Finishing touches翻译日期: 2014年7月8日翻译人员: 铁锚在本节中,会在卡片上添加收藏按钮,并可以通过切换选项卡(tabs)连接到不同的 <post-list> 控制器, 整个应用就算完成了.在本节中,您将学习: 声明事件处理(event handling) 向元素的原型(prototype)添加属性和方法(properties and methods) 自动节点查找(Automatic node finding) 编辑 post-card.h…

第一个Polymer应用 - (3)使用数据绑定

原文链接: Step 3: Using data binding翻译日期: 2014年7月7日翻译人员: 铁锚我们创建的个人信息卡还算漂亮,但对整个应用来说,只有一张卡片看起来有点空荡荡的感觉.在本节中,将通过web服务获取数据,并使用Polymer的数据绑定(data binding)来显示一系列的卡片.获取数据,需要使用初始应用程序(starter)提供的 <post-service> 元素.该元素为虚拟社交网络提供了一个非常简单的API.在本节中,您将使用 posts 属性, 它返回像下…

第一个Polymer应用 - (2)创建你自己的元素

原文链接: Step 2: Your own element翻译日期: 2014年7月6日翻译人员: 铁锚通过上一节的学习和实践, 您已经完成了一个基本的应用程序结构(application structure),从现在开始可以构建一个标签页(card element,卡片元素)来显示名片(post).完成后的标签页包括个人头像,名字,红心按钮,以及内容区域: 图片有点水(平?)的皮冻在本节中,你将会创建一个 <post-card> 元素,用来控制他的子元素布局和样式, 完成后就可以像前面…

Polymer初探

Polymer是什么? Polymer英文为 n.聚合物:多聚体网络高分子:聚合体:高分子聚合物应用在Web组件场景, 表达的是, 一个一个小的Web组件,可以通过此框架聚合为一个整个页面. https://github.com/Polymer/polymer Polymer lets you build encapsulated, reusable elements that work just like standard HTML elements, to use in buildin…

前端组件化Polymer深入篇(1)

在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <script> var SayHello = Polymer({ is:'say-Hello' }) var el1 = document.createElement('say-Hello'); console.log(el1); var el2 = new SayHello(); console.log(…