码迷,mamicode.com
首页 > 其他好文 > 详细

polymer入门例子-已过时

时间:2015-07-18 00:15:39      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:

这个教程挺不错!:http://blog.csdn.net/renfufei/article/details/37040883 过时了,现在的版本已经为1.0了

一:创建APP结构

本教程会使用预先构建好的polymer元素:toolbar,tabs,panel

<meta name="viewport"  content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
//提供缺少的平台特性
//<script src="../components/platform/platform.js">
//该引入的是这个,而不是platform.js
<script src="../components/webcomponentsjs/webcomponents.js"></script> //引入html文件 <link rel="import" href="../components/font-roboto/roboto.html"> //unresolved为了防止,浏览器中没有原生支持的无样式元素,而发生的闪烁。 <body unresolved touch-action="auto"> <core-header-panel> <core-toolbar> //valueattr="name"指会根据子元素的name属性来确定选择哪一个;selected="all"指选择name为all的作为初始的选项卡;self-end什么意思? <paper-tabs id="tabs" valueattr="name" selected="all" self-end> <paper-tab name="all">所有</paper-tab> <paper-tab name="favorites">收藏</paper-tab> </paper-tabs> </core-toolbar> <!-- 主要的页面内容将会放在这里 --> </core-header-panel> <script> var tabs = document.querySelector(‘paper-tabs‘); // 添加事件监听, 很明显,你需要chrome浏览器来运行 // 这里每次切换会触发2次,前一个tab取消选中,以及新tab被选中 tabs.addEventListener(‘core-select‘, function(e) { //e = {detail:object} var detail = e["detail"] || {};
        //e.detail = {isSelected:false; item:paper-tab} var item = detail["item"] || {}; var isSelected = detail["isSelected"];
        //item = paper-tab.innerText, tabs.selected = paper-tabs的selected属性的值 console.log( "Tab(\""+ item["innerText"] + "\") changeTo: "+ isSelected +"; [" + tabs.selected + "] isSelected " ); }); </script> </body>

二:自定义元素:<script>写在template外面

调用自定义元素

<post-card>
	<img src="">
	<h2>孙飞鹏</h2>
	<h3>you are the best</h3>
</post-card>

影子DOM:局部的DOM树添加到某个DOM元素中,局部的DOM样式跟全局的web独立

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-icon-button/core-icon-button.html">
//<polymer-element>自定义新元素的方式,创建的元素叫post-card
<polymer-element name="post-card">
 //<polymer-element>直接子元素中只能有一个<template>,但是<template>可以嵌套<template>,创建的元素不会出现在宿主元素的children中 <template> <style>
//:host指<post-card> :host { display: block; position: relative; background-color: white; padding: 20px; width: 100%; font-size: 1.2rem; font-weight: 300; } .card-header { margin-bottom: 10px; } polyfill-next-selector { content: ‘.card-header h2‘; }
   //::content h2指通过插入点<content>派发的h2,不能对插入点设置自身样式,所以::content伴随后代选择器 .card-header ::content h2 { margin: 0; font-size: 1.8rem; font-weight: 300; } polyfill-next-selector { content: ‘.card-header img‘; } .card-header ::content img { width: 70px; border-radius: 50%; margin: 10px; } core-icon-button { position: absolute; top: 3px; right: 3px; color: #636363; } :host([favorite]) core-icon-button { color: #da4336; } </style>   //添加div和content,layout horizontal center创建flexbox的方式,<img>会访入第一个content <div class="card-header" layout horizontal center> <content select="img"></content> <content select="h2"></content> </div> <core-icon-button id="favicon" icon="favorite" on-tap="{{favoriteTapped}}"> </core-icon-button> <content></content> </template> <script> Polymer({ publish: { favorite: { value: false, reflect: true } }, favoriteTapped: function(event, detail, sender) { this.favorite = !this.favorite; this.fire(‘favorite-tap‘); } }); </script> </polymer-element>

三:数据获取和绑定

post-list

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../post-service/post-service.html">
<link rel="import" href="post-card.html">
//创建一个名为show的发布属性
<polymer-element name="post-list" attributes="show">
  <template>
    <style>
    :host {
      display: block;
      width: 100%;
    }
    post-card {
      margin-bottom: 30px;
    }
    </style>
  //posts="{{posts}}"在<post-service>和自定义元素间加了数据绑定:<post-service>有一个属性posts,也就是这里的{{posts}}
  //id可以随便写 <post-service id="service" posts="{{posts}}"></post-service> <div layout vertical center> <template repeat="{{post in posts}}"> <post-card favorite="{{post.favorite}}" on-favorite-tap="{{handleFavorite}}" hidden?="{{show == ‘favorites‘ && !post.favorite}}"> <img src="{{post.avatar}}" width="70" height="70"> <h2>{{post.username}}</h2> <p>{{post.text}}</p> </post-card> </template> </div> </template> <script> Polymer({ handleFavorite: function(event, detail, sender) { var post = sender.templateInstance.model.post; this.$.service.setFavorite(post.uid, post.favorite); } }); </script> </polymer-element>

其实也挺简单的,通过<post-service>连接前端和后端。

前端引入预设和自定义的元素,后端通过ajax来获取数据。中间通过发布属性来连接。

教程:http://blog.csdn.net/renfufei/article/details/38349971  很不错 介绍了四个布局元素

把browser调整为移动设备

<cored-header-panel> 

header部分:<core-toolbar>或者div.core-header。有很多种模式。需要指定高度
content部分:

 <core-toolbar>

工具栏,容器。通过.medium .tall改变高度

<core-drawer-panel>

通过togglePanel方法来切换状态
nav部分:left, right。drawer属性
content部分:main属性

<core-scaffold>

可以包含以上三个元素

 

把这个教程重新做一遍:http://blog.csdn.net/renfufei/article/details/37040883

创建APP结构做好

开始做自定义元素:script写在template外面

获取,绑定数据:

link html元素是使用href;
post-service--post-list--post-card--index;
post-list.html <polymer-element>有一个发布属性attributes="show",在index.html中使用show="all"
post-list.html <post-service>有一个属性publish="{{itmes}}":publish来自于post-service.html的<polymer-element attributes="publish">,在post-service.html的方法中,可以使用this.publish来接受返回的响应;itmes用在post-list.html中,来表示返回对象的数组。

收尾工作:

黑色变为红色,是通过color属性

很特殊的问题

<paper-tabs selected="all"></paper-tabs>
var tabs = document.querySelector("paper-tabs");
tabs.selected为all。

不能用jquery获取:$("paper-tabs"),获取后,取不到selected的值。
只能通过document.querySelector(); 
添加事件的方法:tabs.addEventListener(‘core-select‘, function(e){});

post-card

 <div class="card-header" layout horizontal center>
  <content select="img"></content>
  <content select="h2"></content>
</div>

<core-icon-button
  id="favicon"
 //选择心形图标 icon="favorite"
//tap(触摸)时,调用favoriteTapped方法 on-tap="{{favoriteTapped}}"> </core-icon-button> <content></content>
  <script>
  Polymer({
  //发布属性的一种方式 publish: { favorite: { value: false,
     //属性值发生变化时 favorite 属性会被更新 reflect: true } }, favoriteTapped: function(event, detail, sender) { this.favorite = !this.favorite;
    //每个自定义元素原型的工具方法之一,触发自定义事件 this.fire(‘favorite-tap‘); } }); </script>

post-list

//favorite-tap 事件 的 事件处理程序 是 handleFavorite, hidden?="{{}}"如果绑定的表达式计算值为true则设置该属性
<post-card favorite="{{post.favorite}}" on-favorite-tap="{{handleFavorite}}" hidden?="{{show==‘favorites‘ && !post.favorite}}"> <img src="{{post.avatar}}" width="70" height="70"> <h2>{{post.username}}</h2> <h2>{{post.text}}</h2> </post-card>
Polymer({  
  handleFavorite: function(event, detail, sender) { 
  //post-list接受post-service传过来的值,是这样获取的。 var post = sender.templateInstance.model.post; this.$.service.setFavorite(post.uid, post.favorite); } });

 

polymer入门例子-已过时

标签:

原文地址:http://www.cnblogs.com/wang-jing/p/4655822.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!