ember.js 101 入门教程第一课

最新推荐文章于 2024-07-04 00:59:27 发布

weixin_34416754

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量124

点赞数

文章标签： javascript 测试 ViewUI

原文链接：http://www.cnblogs.com/cloudhan/p/5405231.html

版权

需要声明的是：目前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.com

Copyright (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

weixin_34416754

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ember.js 101 入门教程第一课

需要声明的是：目前ember.js已经发展到v2.50+ 的版本了，v1.0与新版本已经有很大不同，如果您是为了了解ember.js的一些基础知识，这个入门的东东会有些帮助，如果您正在开发一些web应用，就没什么借鉴和参考价值了，建议直接看官方文档，不要被教程误导了。Ember.js 的MVC框架是与其他的JavaScript框架相比，具有更完整的MVC特性以及创建下一代web应用所需的很...
复制链接

扫一扫