ember.js:使用笔记5 使用view
在已经设置route的情况下,以table为例,可以如下设置,范围为对应的模版;
App.TableView = Em.View.extend({
});
App.TableIndexView = Em.View.extend({
});
也可以通过如下新建,其获得的this为所在模版的this;
{{#view InnerView}}......{{/view}}
InnerView = Ember.View.extend({});
简单设置:
- 设置整体的标签:
- tagName
- 设置class:
- classNames:[](适合固定值);
- classNameBinds[](这个要通过其他属性设置或方法返回,适合变值),同样使用在template设置classname的方法,如 ['isEnabled:enabled:disabled']
- 设置其他attr属性
设置event方法:设置的方法配置在view内所有的element上;
使用模版:模版当中的书写格式与html模版相同;
template: Ember.Handlebars.compile(""),
使用didInsertElement:在render和dom加载完之后执行,此外还有其他在不同时机执行的方法
以tables和table为例在不同url跳转时候的执行:
- x/x -> x/tables: 同时执行tablesIndexView和tablesView;
- x/tables -> x/tables/id1: 只执行 tableview;
- x/tables/id1 -> x/tables/id2 : 都不执行;
- x/tables/id1 -> x/tables: 只执行tablesIndexView;
在x/tables/id1 -> x/tables/id2 之间跳转的时候,可以在controller中定义一个方法
ember.js:使用笔记5 使用view的更多相关文章
- 【前端】Ember.js学习笔记
Model 在默认情况下,model钩子返回的值,会设置为关联的控制器的model属性.例如,如果App.PostsRoute通过model钩子返回了一个对象,这个对象会设置为App.PostsCon ...
- ember.js:使用笔记9 开始单元测试
单元测试被限定在一个范围内,并且不需要Ember应用运行. 使用前准备: 加入Ember-QUnit:获取一系列测试助手帮助单元测试:加入 mian.js; 加入根元素(与集成测试的时候一样):App ...
- ember.js学习笔记
启动服务器 ember server 访问localhost:4200 创建新的路由:ember generate route 路由名称,运行此命令会同时创建一个/templates/.XXXhbs模 ...
- ember.js:使用笔记8 加载测试与集成测试
emberjs使用的测试工具为qunit.js: 加载:将runner.js添加到Index.html:大致内容: if (window.location.search.indexOf("? ...
- ember.js:使用笔记2-数据删除与存储
在模版中写好响应操作触发的action之后,可以在controller:actions中设置了,需要注意的是对数据的操作一般都是对单个object进行操作,所以先要使用笔记1中的方法使用ObjectC ...
- ember.js:使用笔记1-数组数据统一显示
ember中数据一般都是以array的形式存储的,控制器使用,如: App.DataController = Em.ArrayController.extend({}); 想要在一个页面中输出所有的数 ...
- ember.js:使用笔记7 页面中插入效果
在某些情况下,我们需要根据数据生成某些效果:由于每个模版的controller可能不同,在不同页面之间跳转可能会无法随即更新的问题. controller: 直接使用标签:{{}},适用于在子项目内切 ...
- ember.js:使用笔记10 常用方法
init: controller中初始化方法, //注意该方法是在其他方法之前,所以取不出this,model等值: 跳转:this.tra ...
- ember.js:使用笔记6 子项目的前进与后退
如下代码会根据model产生不同的table项,在进行其他设置后,一般是根据id来跳转到相应项目子项中: {{#each}} {{#link-to "tabls" this}}{{ ...
随机推荐
- 设置dom元素可拖动,支持ie5+
摘要: 最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面.最终决定做一个在固定宽和高的位置,用户可以拖动图片查看.所以自己就写了一个支持ie5+,chrome,Fi ...
- POJ 2442 Sequence
Pro. 1 给定k个有序表,取其中前n小的数字.组成一个新表,求该表? 算法: 由于 a1[1] < a1[2] < a1[3] ... <a1[n] a2[1] < a2 ...
- 三种dedecms调用相关文章的方法
在文章的末尾或侧边栏添加相关文章可以提高用户的黏度,提高pv,增加se的好印象(哈哈),那么dedecms如何调用相关文章呢?有三种方法可以实现. 第一种dedecms调用相关文章的方法,用默认的li ...
- Connect the Cities(MST prim)
Connect the Cities Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u ...
- ADF成长记1--认识ADF
2014-07-08 近段时间由于公司项目需要,开始接触Oracle ADF.都说有事没事,上百度,但是对于IT技术而言,上百度还真是不一定好使,至于谷歌嘛,很不巧的进不去了.不过网上ADF的资料当真 ...
- 暑假热身 A. GCC
GCC编译器是一个由GNU项目维护的编译系统,它支持多种编程语言的编译.但是它并不包含数学运算符“!”.在数学中,这个符号代表阶乘.表达式n!的意思是从1到n的所有整数的乘积. 例如,4!=4*3*2 ...
- PHP表单验证
<!DOCTYPE html> <html> <head> <title>Test Code</title> </head> & ...
- JetBrains WebStorm 7.0 Build 131.202 Win/Mac/Liniux
JetBrains WebStorm 7.0 Build 131.202 (Win/Mac/Liniux) | 121.6/106/133 Mb WebStorm 7 — Everything you ...
- 基础知识《六》---Java集合类: Set、List、Map、Queue使用场景梳理
本文转载自LittleHann 相关学习资料 http://files.cnblogs.com/LittleHann/java%E9%9B%86%E5%90%88%E6%8E%92%E5%BA%8F% ...
- (转)SQL Server 中的事务和锁(三)-Range S-U,X-X 以及死锁
在上一篇中忘记了一个细节.Range T-K 到底代表了什么?Range T-K Lock 代表了在 SERIALIZABLE 隔离级别中,为了保护范围内的数据不被并发的事务影响而使用的一类锁模式(避 ...