没有合适的资源?快使用搜索试试~ 我知道了~
探索Emberjs制作一个简单的Todo应用
需积分: 0 0 下载量 54 浏览量
2020-12-04
01:52:36
上传
评论
收藏 89KB PDF 举报
温馨提示
试读
6页
目标 使用Emberjs制作一个简单的Todo应用,实现这样一个效果:通过在文本框输入文本,创建一条代办事项,代办事项可以选择优先级,完成的事项可以删除。 准备 完成这个应用,需要做点准备: 1、创建一个html页面,暂时不管样式; 2、脚本:emberjs,handlebars、jQuery。这三个脚本可以从网上获得,我们将把他们加入到head标签里去。 制作 创建页面,加入脚本,就可以开始制作应用。html代码如下: 代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>Ember–第一个应用</title>
资源推荐
资源详情
资源评论
探索探索Emberjs制作一个简单的制作一个简单的Todo应用应用
目标目标
使用Emberjs制作一个简单的Todo应用,实现这样一个效果:通过在文本框输入文本,创建一条代办事项,代办事项可以选择
优先级,完成的事项可以删除。
准备准备
完成这个应用,需要做点准备:
1、创建一个html页面,暂时不管样式;
2、脚本:emberjs,handlebars、jQuery。这三个脚本可以从网上获得,我们将把他们加入到head标签里去。
制作制作
创建页面,加入脚本,就可以开始制作应用。html代码如下:
代码如下:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Ember–第一个应用</title>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script type=”text/javascript” src=”http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js”></script>
<script type=”text/javascript” src=”http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js”></script>
</head>
<body>
</body>
</html>
按照ember的要求,需要用Ember.Application.create()先创建应用实例,这也作为应用的命名空间。这个create方法可以传递
一个对象属性ready,属性值是一个函数,在应用准备就绪时调用。Ember还可以使用缩写Em来代替。
在Ember中有一个Em.Logger对象,相当于window.console,可以用来调试。我们可以在这个ready加入一个消息,显示在控
制台中。
现在,在head标签里再增加一个script标签来写应用的脚本,实例化一个ember应用,顺便把MVC各模块的区域也加上。脚本
代码如下:
代码如下:
/********************
application
********************/
window.App = Ember.Application.create(
{
ready:function(){
Em.Logger.info(‘欢迎使用待办事项应用’);
}
}
);
/********************
model
********************/
/********************
view
********************/
/********************
controlle
********************/
然后,我们需要一个输入框来输入代办事项,需要创建一个ember文本框视图。ember视图可以用Ember.View类来创建(使用
create方法)或扩展(使用extend方法)一个新的视图类。不过对于文本框视图,ember提供了更直接的方式——
Ember.TextField类,我们可以先使用这个类来扩展一个自定义的视图,然后再实例化添加到页面上。我们将这个文本框视图
类命名AddItemView 。
在脚本代码里的view区域添加上文本框视图代码:
代码如下:
App.AddItemView = Ember.TextField.extend({
});
可以给它加个提示语,html5支持placeholder,可以拿来用。还需要在按下回车时将内容添加到代表事项列表,这里需要用到
一个属性:insertNewline,在按下回车时会调用相应的函数。加入后的代码如下:
代码如下:
App.AddItemView = Ember.TextField.extend({
资源评论
weixin_38592848
- 粉丝: 3
- 资源: 910
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功