模版链接和图片

数据

注意 phones.json 文件包含了唯一的 Id 和图像 url,url 指向 app/img/phones/ 路径:

1
2
3
4
5
6
7
[
{
"id": "motorola-defy-with-motoblur",
"imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
},
]

模版

1
2
3
4
5
6
7
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/\{\{phone.id}}" class="thumb"><img ng-src="\{\{phone.imageUrl}}"></a>
<a href="#/phones/\{\{phone.id}}">\{\{phone.name}}</a>
<p>\{\{phone.snippet}}</p>
</li>
</ul>

image 标签用了 ngSrc 指令,这一指令阻止浏览器按字面意思对待 angular {{表达式}},阻止它请求一个无效的 url http://localhost:8000/app/{{phone.imageUrl}}。使用 ngSrc 指令阻止浏览器发起无效的 http 请求。

实验

把 ngSrc 换成 src 属性,用 Firebug 之类的工具查看服务器访问日志,确认应用发起了无关的请求 /app/%7B%7Bphone.imageUrl%7D%7D (或 /app/{{phone.imageUrl}})。

阅读全文 »

过滤

Controller

没作任何变化

Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
Search: <input ng-model="query">
</div>
<div class="span10">
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
\{\{phone.name}}
<p>\{\{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>

加个标准的 <input> 标签,使用 Angular 的 $filter 函数为 ngRepeat 指令处理输入内容。

原理说明如下:

  • 数据绑定:Angular 的核心特色之一。页面加载时,Angular 把输入框的名字和数据模型的同名变量绑定,保持两者同步。
    用户在输入框输入内容(取名 query),立即作为手机列表的过滤器(phone in phones | filter:query

  • 过滤器(filter )的使用:filter 函数利用 query 值创建一个匹配 query 结果的新数组。
    ngRepeat 自动更新视图,通过过滤器改变手机的数量。

    阅读全文 »

五一放假没干啥正事,想起鼓捣 AngularJS 了,把它的新手指南一口气翻了个遍,算是入了点门了。个人感觉这货挺适合做 web app 的(可能因为我没接触过别的 MVC 框架吧…),它的亮点是数据绑定,扩展 HTML,居然把 DOM 操作都替咱做了…

话不多说,下面是我边看边记的笔记,自认为重点的记了下中文。

原文地址:AngularJS Tutorial
笔记作者:涂鸦码龙

搭环境

  • 安装nodejs

    1
    node --version //nodejs 版本
  • 安装 Git

  • 克隆 angular-phonecat 项目

    1
    git clone git://github.com/angular/angular-phonecat.git
  • 找到项目目录

    1
    cd angular-phonecat
  • 起 http 服务器

    1
    node scripts\web-server.js
阅读全文 »

原作者:Peter-Paul Koch(PPK)
原文链接:Blink
翻译:涂鸦码龙

Google 为 Chrome 和 Opera 创建了 新的渲染引擎 Blink。其中有没有天大的秘密,影响又是怎样的呢?

这儿有一些值得关注的 Blink 资源,我把它作为综述:

除了这些之外,Peter Beverloo 非常热心地通过电子邮件发了我一些信息。

Blink 是一个新的渲染引擎,这意味着它对 CSS 和 JavaScript 的解析将与 WebKit (Gecko 或者 Trident) 有所不同。它将驱动所有使用 Chromium 的浏览器(Google 的开源浏览器)。

Blink 已成为 WebKit 的分支,这意味着当前它跟 WebKit 几乎一样。不过,WebKit 本身不是一个单一的实体;正如我原先的研究成果 ,一款基于 WebKit 的浏览器对 CSS 和 JavaScript 的支持并不完全一致。如今,Blink 作为一种 WebKit 不足为奇。

将来这些会改变,从现在开始,WebKit 和 Blink 将带着不同的目标和不同的支持特性分道扬镳。当前 Blink 和 WebKit 的代码共享存在可行性,但是,久而久之,两者差异越来越大时,共享变得不那么容易。

因此,Blink 已成为一个 WebKit 版本,久而久之,它会像其它分支一样,离 WebKit 越来越远,越来越远……

阅读全文 »

原文作者:Chris Mills
原文链接:Advanced cross-browser flexbox
翻译:涂鸦码龙

引言

CSS3 弹性布局模块 —— 短命名叫 Flexbox —— 为我们的 web 开发带来了许多能量和令人兴奋的畅想空间,我们可以快速轻松地搭建复杂的网站布局,摒弃一些我们惯常使用的不合理的 hacks 和 补丁。我的文章 《伸缩布局 — 打开布局天堂之门?》讲述了一些 Flexbox 的基础,本文将是进阶教程,我会带大家看一些高级点的例子,使用 Modernizr 为那些参差不齐的 flexbox 支持情况提供不同的样式,以便提供当前可用的最优的跨浏览器方案。

看下面例子

我为文章做的例子如图1:

图1:最终布局例子的截图

实例包含多层 flexbox 容器,比较急切的话可以先看看最终效果,然后继续探索代码细节。

您对此篇文章感兴趣的话,欢迎到我们的欧朋技术博客看全文,这里没有复制全文,见谅见谅~

先啰嗦啰嗦,吐槽几句,木有同感可以略过……

“尼玛,真是应了 Octopress 那句口号:黑客专用博客框架,一般人想搞定它真不易啊!自从决定用 Octopress 起就开始处处踩坑,基本木有顺利的时候。就想用用Markdown ,体验一下所谓的畅快淋漓的写作快感,只想少花时间折腾博客样式,容易嘛……”

开始选的 jekyllbootstrap 按照教程步骤一步步来,安个 Ruby 费了老鼻子劲,最后卡在 jekyll --server 上,死活在本地无法预览,写个博客,做点改动都要传到 Github 看效果,实在忍受不了…… 放弃!

不破不立,正当我打算放弃折腾 Jekyll 这破玩意儿的时候,发现了 Octopress ,它真像黑夜里的一盏明灯啊,让我又燃起了希望~~~

果不其然,Octopress 配置起来容易许多,再加我有了一些折腾 Jekyll 的经验,虽然过程有点小坎坷,但在 Google 的帮助下总算搭起了环境。

Google 的文章一大把,但适合自己最重要,还是把配置 Octopress 的过程总结了一篇博文留念《Deploy Github Pages Using Octopress on Windows》

阅读全文 »

原文地址:http://css-tricks.com/the-lengths-of-css/
原文作者:CHRIS COYIER
译者:张金龙 @金龙Along

CSS 里有不少把长度作为值的属性,盒模型的属性就是明显的例子:width, height, margin, padding, border。还有其它例子:box-shadow的偏移和阴影半径,或者字体的大小和字间距。CSS 都有哪些可用的“长度单位”呢?已经相当多啦。

绝对长度

px

1
2
3
.wrap {
width: 400px;
}

Pixel 可能是最容易想到的衡量“设备像素”的单位,它不需要对显示器上的屏幕像素做任何事。它的确是一个简单易用的度量尺寸

它被设想成一个跨设备和显示器的标准化的值,实际上这一设想越来越不成立。举例来说,在 iPad mini 和 iPad 上渲染同一个网站,如果长度单位都被设成 px ,按理说 iPad mini 上的网站会超出屏幕。

px 尽管一直有些缺点,它仍然是网络上典型的度量单位。许多其它的长度会直接换算成 px,JavaScript 就是用的 px 。

阅读全文 »

最近项目中用到了 git branchgit submodule,查阅了一些文章,总算有点头绪了,连同一些常用的 git 命令记录在此,以便查阅。

git 常用命令

  • 远程仓库相关命令

检出仓库:$ git clone git://github.com/jquery/jquery.git

查看远程仓库:$ git remote -v

添加远程仓库:$ git remote add [name] [url]

删除远程仓库:$ git remote rm [name]

修改远程仓库:$ git remote set-url --push [name] [newUrl]

拉取远程仓库:$ git pull [remoteName] [localBranchName]

推送远程仓库:$ git push [remoteName] [localBranchName]

初始化仓库:git init

阅读全文 »

官方文档

“Octopress is a blogging framework for hackers”
Octopress 是黑客专属的博客框架,命令行可以搞定一切部署。

前期准备

  1. 安装 Git http://git-scm.com/ (需翻墙), google code 也提供下载
  2. 使用 rbenvRVM 安装 Ruby 1.9.3
    这俩儿货我均搞不定,总是磕磕绊绊不顺利,最终发现了一个简单的套件 RailsInstaller 。这个相当爽啊,包含:Ruby 1.9.3-p125,Bundler 1.0.18,Git 1.7.6,DevKit等工具,虽然有的用不着,但比起配置 Ruby 和一些插件痛快多了。
    阅读全文 »

这里记录我原创的一些文章,有翻译的,有自己写的,算是一点积淀吧。旧的文章已放到了其它博客上,这里只列出了链接;以后新的文章会在此博客更新。