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中定义一个方法

时间: 2024-11-25 13:31:55

ember.js:使用笔记5 使用view的相关文章

ember.js学习笔记

启动服务器 ember server 访问localhost:4200 创建新的路由:ember generate route 路由名称,运行此命令会同时创建一个/templates/.XXXhbs模板文件和/route/XXX.js文件 注:要看见新路由的内容需要,URL改为:localhost:4200/路由名称,此外,在application.hbs文件内需要有{{outlet}}

ember.js:使用笔记9 开始单元测试

单元测试被限定在一个范围内,并且不需要Ember应用运行. 使用前准备: 加入Ember-QUnit:获取一系列测试助手帮助单元测试:加入 mian.js; 加入根元素(与集成测试的时候一样):App.rootElement = '#ember-testing'; 设置单元测试: Ember.setupForTesting();   //关闭Ember自动运行循环的执行,让用户一定程度上控制运行循环流程: emq.globalize();   //使助手函数变成了全局可用: 解析器: setRe

ember.js:使用笔记2-数据删除与存储

在模版中写好响应操作触发的action之后,可以在controller:actions中设置了,需要注意的是对数据的操作一般都是对单个object进行操作,所以先要使用笔记1中的方法使用ObjectController. 新增并存储数据: 模版中可以设置 {{input type="text" class="form-control" placeholder="title" value=newTitle}} 来进行双向绑定,在控制器actions

ember.js:使用笔记1-Array与Object

ember中数据一般都是以array的形式存储的,控制器使用,如: App.DataController = Em.ArrayController.extend({}); 在模版中使用{{#each}}输出Aarray的每个Object,这时时候可能需要对其进行操作,使用ObjectController;可以在每个each中使用itemController来新建一个ObjectController: {{#each data in model itemController="data"

ember.js:使用笔记6 页面中插入效果

在某些情况下,我们需要根据数据生成某些效果:由于每个模版的controller可能不同,在不同页面之间跳转可能会无法随即更新的问题. controller: 直接使用标签:{{}},适用于在子项目内切换的时候及时更新: view: 使用didInsertElement: 适用于在其他页面切换到当前view的情况下:  

ember.js:使用笔记4 数组数据的分组显示

除了之前介绍的将数组数据在一个页面中输出的方法,还可以将数组数据分组,按照点击,在不同页面中分别显示,方法为: Model: 例如:Table Router: 设置一个父对象和子对象设置: this.resource("tables",function() { this.resource("table",{path:"/:table_id"}); //依照id输出 }); Route: App.TablesRoute = Em.Route.ext

ember.js:使用笔记6 子项目的前进与后退

如下代码会根据model产生不同的table项,在进行其他设置后,一般是根据id来跳转到相应项目子项中: {{#each}} {{#link-to "tabls" this}}{{name}}{{/link-to}} {{/each}} 这时候我们可能需要一额外的按钮而不是直接点击连接进行子项目的前进与后退,可采用如下方法: 方法1: 在对应controller内设置: nextId : function(){ var arrs = //获得对应子项目的content: var thi

ember.js:使用笔记3 活用{{bind-attr}}

说明:属性值绑定(属性值有无引号都可以) 如果是非布尔值: 一般使用,绑定其值; 使用冒号时,绑定名称,如 :high -> high; 如果是布尔值: 如果值是true,绑定其名,这里要注意驼峰写法: 特殊的三个写法:都绑定书中的名称,没有驼峰写法改变: isEnable:enabled; isEnable:enabled:disabled; isEnable::disabled;

ember.js:使用笔记10 常用方法

init: controller中初始化方法,                               //注意该方法是在其他方法之前,所以取不出this,model等值: 跳转:this.transitionToRoute(routename,param);  //形式对应如:this.resource('question', {path: 'test/:fullname/:sequence/:guid'});