ember.js 101 入门教程第一课

需要声明的是：目前ember.js已经发展到v2.50+ 的版本了，v1.0与新版本已经有很大不同，如果您是为了了解ember.js的一些基础知识，这个入门的东东会有些帮助，如果您正在开发一些web应用，就没什么借鉴和参考价值了，建议直接看官方文档，不要被教程误导了。

Ember.js 的MVC框架是与其他的JavaScript框架相比，具有更完整的MVC特性以及创建下一代web应用所需的很多特性，就像作者说的是个雄心勃勃的框架。
学习之前我们需要在脑子里建立些概念。一个ember.js的应用需要创建一个命名空间（也就是创建一个Application对象实例），空间里会包含路由、数据模型、控制器、视图、模版，基本上每个路由要有提供数据的模型，对应的控制器，对应的视图和模版—一套组件，也就是说应用程序空间里会有很多套组件构成，每套组件包含了路由、模型、控制器、视图、模版，而这些ember.js 都有默认创建，我们要做的是改写这些默认组件。把技术语言翻译成大白话和中文其实挺有难度的。。。

介绍数据绑定的模版

1、构建依赖

首先要做的事情是在文件head标签部分声明ember依赖的两个小伙伴 jQuery 和 Handlebars。可以通过ember.js工具完成，也可以手工自己构建完成。

主要的代码：

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>

2、Hello word 第一个应用

如何构建一个Hello word 的ember应用程序，并且运行它呢？你所需要的只是一个Templates 和一行JavaScript 代码。

Templates：

<h1>Hello, World!</h1>

JavaScript：

var App = Ember.Application.create()

后台的ember会创建一个控制器和根路径，后面我们会详细讲解。

3、显示数据到模版

好了，再进一步，如何通过模版显示数据？

现在我们已经有了一个路由（网址）和一个模版，我们要把数据绑定到模版。
首先，我已经得到了App这个应用程序对象实例，我可以定义一个name属性，并且给它赋值。

var App = Ember.Application.create();
App.name = "Ember App";

然后更新模版来显示它。

<h1>{{App.name}}</h1>

4、绑定数据到模版

ember中任何时候你在模板中显示数据，它会自动绑定，该模板将保持的实时更新。

我们定义一个新的name属性，并初始化设置secondsViewed属性值为 0，定义一个函数setInterval 用来使属性值secondsViewed 自动 +1，最大值为1000。
ember中get是读取某个值，set是设置某个值，刚开始接触ember 会有些不大习惯。
在用户界面上放上 secondsViewed 属性。

var App = Ember.Application.create({name: "Timer",secondsViewed: 0
});setInterval(function() {var viewed = App.get('secondsViewed');App.set('secondsViewed', viewed + 1);
}, 1000);

<h1>{{App.name}}</h1>
<h2>{{App.secondsViewed}}</h2>

本文完。

完整代码如下：

<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.comCopyright (c) 2016 by symphonyh (http://jsbin.com/yehubi/1/edit)Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body><script type="text/x-handlebars"><h1>{{App.name}}</h1><h2>{{App.secondsOnPage}}</h2></script><script id="jsbin-javascript">
var App = Ember.Application.create()App.name = "Hello World!";
App.secondsOnPage = 0;setInterval(function() {App.set('secondsOnPage', App.get('secondsOnPage') + 1);
}, 1000);
</script>
</body>
</html>

转载于:https://www.cnblogs.com/cloudhan/p/5405231.html

ember.js 101 入门教程第一课相关推荐

Processing入门教程第一课-Processing的“前世今生”
很早以前大概13.14年就通过清华大学付志勇教授了解到了Processing这个工具,起初只是初步了解并没有下定决心学习(当初资料太少了).由于当时只是初步的看了看,所以很多内容和知识点都是一知半解的 ...
黑客渗透入门教程第一课：粗暴的端口扫描
很多人想学黑客知识,却不知如何入门,网上的教程也太繁琐,小白看了也头疼,那还是我来写黑客系列入门教程吧,跟着我做,你能黑客入门的. 端口扫描是指发送一组扫描消息,了解其提供的计算机网络服务类型(这些网 ...
160921、React入门教程第一课--从零开始构建项目
工欲善其事必先利其器,现在的node环境下,有太多好用的工具能够帮助我们更好的开发和维护管理项目. 我本人不建议什么功能都自己写,我比较喜欢代码复用.只要能找到npm包来实现的功能,坚决不自己敲代码. ...
ionic入门教程第一课--环境搭建和新建ionic项目
最近由于公司项目需要,自学Ionic.在这里做个备忘,也希望能帮到想自学ionic的其他朋友. 一.首先需要安装node.js环境,对于不了解node.js的同学也没有关系, 因为我们有用到的只是no ...
行空板入门教程第一课：初识行空板
行空板是什么? 大家可能在之前都没听说行空板,但你可能听过micro:bit.掌控板亦或者是树莓派.行空板是一款由DFRobot专为Python编程教育而设计的开源硬件,是一块有着树莓派级别性能,如m ...
微信公众号开发入门教程第一篇
微信公众号开发入门教程第一篇关键字:微信公众平台开发作者:方倍工作室在这篇微信公众平台开发教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯.及HTTP/XML/CSS/ ...
易语言超人气教程第一课（放弃语言之争）
易语言教程第一课点击下载 youku网观看 56网观看 qq网观看新浪网观看 sohu网观看
Unity3D逆向基础教程第一课
课程名称:Unity3D逆向基础教程第一课课程类型:Unity3D 课程内容: 1.unity逆向环境搭建 2.unity文件介绍 3.reflector工具使用课程时长:25分钟课程作者:Sa ...
三维虚拟电子沙盘开发教程第一课利用WPF建立3d gis数字地球（非axhost方式）
三维虚拟电子沙盘开发教程第一课利用WPF建立3d gis数字地球(非axhost方式) 下一步新建一个wpf工程.然后引用SDK中的gislib.dll,NewGisBiao.dll如下图: 下面上 ...
火山PC抓取快递物流查询接口教程第一课
本源码转载自利快云https://www.lkuaiy.com/ 火山PC抓取快递物流查询接口教程第一课一.准备工作工具:精易编程助手,易语言绝佳伙伴,同样适用于火山下载地址: http://s ...

ember.js 101 入门教程第一课

介绍数据绑定的模版

1、构建依赖

2、Hello word 第一个应用

3、显示数据到模版

4、绑定数据到模版

ember.js 101 入门教程第一课相关推荐

最新文章

热门文章

ember.js 101 入门教程 第一课

介绍数据绑定的模版

1、构建依赖

2、Hello word 第一个应用

3、显示数据到模版

4、绑定数据到模版

ember.js 101 入门教程 第一课相关推荐

最新文章

热门文章

ember.js 101 入门教程第一课

ember.js 101 入门教程第一课相关推荐