文档章节

Ember.js 入门指南——调试助手

ubuntuvim
 ubuntuvim
发布于 2015/09/21 10:37
字数 1066
阅读 505
收藏 0

    Ember不仅提供了专门用于调试Ember程序的谷歌、火狐浏览器插件Ember Inspector”( 安装插件可能需要fa,如果你也是一个程序员我想fq对于你来说应该不是什么难事!!!),还提供了用于调试的helper

按照惯例,先做好准备工作,分别执行Ember CLI命令创建controllerroute和模板:

ember generate controller dev-helper

ember generate route dev-helper

1,日志助手{{log}}

       {{log}}可以把从controllerroute类传递到页面上的值以日志的形式直接输出在浏览器的控制台上。下面代码在controller类添加测试数据。

// app/controllers/dev-helper.js
 
import Ember from 'ember';
 
export default Ember.Controller.extend({
       testName: 'This is a testvalue...'
});

我们可以在模板上直接显示字符串testName的值,也可以使用{{log}}助手以日志形式输出在控制台。当然你也可以直接使用{{log ’xxxx‘}}在控制台打印xxxx。第二点断点助手的示例中将为你演示{{log ‘xxx’}}用法。

<!-- app/templates/dev-helper.hbs -->
 
直接显示在页面上:{{testName}}
{{log testName}}

    运行http://localhost:4200/dev-helper之后我们可以在页面上看到字符串testName的值。打开谷歌或者火狐的控制台(console标签下)可以看到也打印的字符的值。比较简单我就不再截图了……

 

2,断点助手{{debugger}}

       当你需要调试的时候,你可以在模板上需要添加断点的地方添加这个助手,运行的时候会自动停在添加这个助手的地方。

{{log '这句话在断点前面'}}
{{debugger}}
<br>
{{log '这句话在断点后面'}}

    不出意外程序会停在有{{debugger}}这一行。控制台应该会打印这句话在断点前面。然后通过点击下一步跳过断点,然后继续打印这句话在断点后面

    运行结果不好截图,请读者自己试试吧!!!

 

    当你使用了{{debugger}},并且程序停止进入debug状态的时候,你可以直接在浏览器控制台的命令行输入get(‘key’)来获取controller设置的值。

在箭头所指的位置输入get(‘testName’),然后按enter键执行。会得到如下结果:

可以看到正确的获取到了前面在controller类里设置的值。

如果你不是在调试模式下输入get(‘testName’)那么会提示如下错误。

    你还可以在遍历助手{{each}}中使用{{debugger}},点击一次下一步”或者按F8就会执行一次循环。

     首先重写route类的model回调,在里面添加测试数据。

//  app/routes/dev-helper.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
       model: function() {
              return [
                     { id: 1, name: 'chen', age: 25 },
                     { id: 2, name: 'ibeginner.sinaapp.com', age: 2 }
              ];
       }
});

在模板的each助手中使用{{debugger}}助手。

{{#each model as |item|}}
       {{debugger}}
{{/each}}

    运行,浏览器自动进入debug模式。此时你可以在浏览器控制台命令输入get(‘item.name’)来获取本次循环对象的属性值。然后你几点下一步或者按F8,程序自动进入到下一次循环,然后你再输入get(‘item.name’),此时得到的是本次循环对象属性值。然后点击下一步或者按F8进入第三次循环,由于route类设置返回的数组只有2个元素,第三次已经没有元素。所以这次会自动退出debug模式。

       如果运行正常你可会得到下图所示的输出信息。

   在调试状态下你还可以直接在浏览器控制台命令行输入context获取上下文信息。会输出本页面所包含的所有类和属性。

    有兴趣的你可以一个个展开看看里面的东西。本文就不再展开看了。

 

       上述介绍的就是Ember提供的调试助手的所有使用方法。在你开发Ember应用的时候应该是很有用的,特别是在each循环遍历的时候。

 


© 著作权归作者所有

ubuntuvim

ubuntuvim

粉丝 33
博文 76
码字总数 98477
作品 1
深圳
后端工程师
私信 提问
Ember.js 入门指南——总目录

Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,本系列教程是通过学习官网教程然后摘抄个人觉得比较重要的部分,加上学习实例整合...

ubuntuvim
2015/10/25
1K
2
Ember.js 入门指南--目录

本系列文章全部从(http://ibeginner.sinaapp.com/)迁移过来,欢迎访问原网站。 Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,...

ubuntuvim
2015/09/07
396
2
Ember.js 入门指南——路由定义

当你的应用启动的时候,路由器就会匹配当前的URL到你定义的路由上。然后按照定义的路由层次逐个加载数据、设置应用程序状态、渲染路由对应的模板。 1,基本路由 在app/router.js的map方法里定...

ubuntuvim
2015/09/24
3.6K
8
Ember.js 入门指南——包裹内容

准备工作: ember g route wrapping-content-in-component-route ember g component wrapping-content-in-component 有些情况下,你需要定义一个包裹其他模板提供的数据的组件。比如下面的例...

ubuntuvim
2015/10/11
200
0
Ember.js 入门指南——路由简介

从本文开始,将为大家介绍路由(route),如果你看过前面的《Ember.js 入门指南——{{link-to}} 助手》这篇文章应该初步了解了route。不过在这篇文章中只是简单介绍了路由是定义、路由层次,...

ubuntuvim
2015/09/22
478
0

没有更多内容

加载失败,请刷新页面

加载更多

Supervisor-守护进程工具

进程管理工具(Supervisor) 简介 Supervisor是用Python开发的一个client/server服务,是Linux/Unix系统下的一个进程管理工具,不支持Windows系统。它可以很方便的监听、启动、停止、重启一个或...

鬼方赤命
16分钟前
4
0
ajax与Fetch

一、ajax 使用步骤 1.创建XmlHttpRequest对象 2.调用open方法设置基本请求信息 3.设置发送的数据,发送请求 4.注册监听的回调函数 5.拿到返回值,对页面进行更新 //1.创建Ajax对象 if(...

Bing309
19分钟前
2
0
Nginx正则配置

Nginx配置中Location的语法规则 location [ = | ~ | ~* | ^~ | !~ | !~* ] /uri/{ … } = 表示精确匹配 ~ 表示区分大小写正则匹配 ~* 表示不区分大小写正则匹配 ^~ 表示URI以某个常规字符串开...

NoodlesMars
24分钟前
17
0
数组

1. 二维数组的查找 https://my.oschina.net/u/3973793/blog/3097920 2. 数组中重复的数字 https://my.oschina.net/u/3973793/blog/3106083 3. 构建乘积数组 https://my.oschina.net/u/39737......

Garphy
25分钟前
4
0
JS中的七大数据类型

在JavaScript中变量包含两种类型的值:一种是基本类型,一种是引用类型。任何不属于基本类型的东西都属于对象。 基本类型包括:Null、Undefined、Number、String、Boolean、Symbol(ES6新增)...

蓝小驴
29分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部