×

EmberJS 教程

EmberJS 概述EmberJS 环境配置EmberJS 应用EmberJS 对象模型EmberJS 模板EmberJS 路由器EmberJS 组件EmberJS 模型EmberJS 视图EmberJS 控制器EmberJS 测试EmberJS 指定查询参数

Ember 对象模型

Ember 类的定义 初始化 继承Ember 类的扩展Ember 计算属性Ember 观察者Ember 数据绑定Ember 枚举Ember 第一章对象模型小结

Ember handlebars模板

Ember handlebars基础Ember handlebars条件表达式Ember handlebars遍历标签Ember handlebars显示对象键Ember handlebars属性绑定Ember {{link-to}} 助手Ember 路由 模板执行渲染顺序Ember {{action}} 助手Ember 表单元素Ember 调试助手Ember 工具类的助手Ember 第二章模板小结

Ember 路由

Ember 路由定义Ember 指定与路由关联的模型Ember 模板渲染Ember 路由重定向Ember 路由终止挑战和激活Ember loading error子路由Ember 查询参数Ember 异步路由

Ember 组件

Ember 组件定义Ember 属性传递Ember 包裹内容自定义包裹组件的HTML标签Ember 处理事件Ember action触发变化

Ember 控制器

Ember 控制器Ember 管理控制器的依赖关系

Ember 模型

Ember model简介Ember 定义模型Ember 记录查询Ember 新建、更新、删除记录Ember 设置记录到StoreEmber model的关联关系处理Ember 元数据Ember 自定义适配器Ember 自定义序列号器

Ember 测试

Ember 测试简介Ember 验收测试Ember 单元测试

Ember 数据绑定


正如其他的框架一样,Ember也有它特有的数据绑定方式,并且可以在任何一个对象上使用绑定。而然,数据绑定大多数情况都是使用在Ember框架本身,对于开发者最好还是使用计算属性更为简单方便。

双向绑定

// 双向绑定
Wife = Ember.Object.extend({
  householdIncome: 800
});
var wife = Wife.create();

Hasband = Ember.Object.extend({
  //  使用 alias方法实现绑定
  householdIncome: Ember.computed.alias('wife.householdIncome')
});

hasband = Hasband.create({
  wife: wife
});

console.log('householdIncome = ' + hasband.get('householdIncome'));  //  output > 800
// 可以双向设置值

//  在wife方设置值
wife.set('householdIncome', 1000);
console.log('householdIncome = ' + hasband.get('householdIncome'));  // output > 1000
// 在hasband方设置值
hasband.set('householdIncome', 10);
console.log('wife householdIncome = ' + wife.get('householdIncome'));

run result

需要注意的是绑定并不会立刻更新对应的值,Ember会等待直到程序代码完成运行完成并且是在同步改变之前,所以你可以多次改变计算属性的值。由于绑定是很短暂的所以也不需要担心开销问题。

单向绑定

单向绑定只会在一个方向上传播变化。相对双向绑定来说,单向绑定做了性能优化,对于双向绑定来说如果你只是在一个方向上设置关联其实就是一个单向绑定。

var user = Ember.Object.create({
  fullName: 'Kara Gates'
});

UserComponent = Ember.Component.extend({
  userName: Ember.computed.oneWay('user.fullName')
});

userComponent = UserComponent.create({
  user: user
});

console.log('fullName = ' + user.get('fullName'));
// 从user可以设置
user.set('fullName', "krang Gates");
console.log('component>> ' + userComponent.get('userName'));
// UserComponent 设置值,user并不能获取,因为是单向的绑定
userComponent.set('fullName', "ubuntuvim");
console.log('user >>> ' + user.get('fullName'));

run result

关于数据绑定的知识点不多,相对来说不是重点,毕竟对象之间的关联关系是越少、越简单越好。关联关系多了反而难以维护。


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)