类
Person = Ember.object.extend({})
Child = Person.extend 继承
var person = Person.create() 本地存值 可以传参进去
person.show 本地值用 Person类里写this.get(“”) 解析
person.get(“”) 可以获取Person类里的属性
person. 可以获取Person类里的方法
person.set(“”)
Person.reopen 添加新的属性方法或者重写
fullName: Ember.computed(function(){}) 新增1个计算属性
Ember.observer() 观察者 监测属性变化 包括计算属性
双向绑定
2个类数据绑定 Ember.computed.alias(“第1个类名.里的属性”)
单向绑定 2个类不一样
Ember.component.extend({Ember.computed.oneWay(第1个类名.里的属性)})
模板
ember g template application
application.hbs 首页
{{}}解析
·······························································
ember generate controller application
.js
js会自动找到.hbs模板
export default Ember.Controller.extend({});
·······························································
ember generate route handlbars-conditions-exp-route
ember generate route handlbarsConditionsExpRoute
.js .hbs
export default Ember.Route.extend({});
返回1个对象到模板上
·······························································
条件表达式
三元表达式 {{if flag “show”“false”}}
{{#if}}
{{else if}}
{{else}}
{{/if}}
{{#unless}} 非
{{/unless}}
遍历
{{#each as |item|}}
{{/each}}
ember generate component store-categories
{{#each-in as |index,item|}}
{{#each as |item|}}
{{/each}}
{{/each-in}}
属性绑定
ember generate route binding-element-attributes
.hbs {{model.imgUrl}}
.js model: function({return {imgUrl: “”}})
{{link-to}}
{{action}}
export default Ember.Route.extend({});
{{action ' showDetailInfo '}}
{{action 'hitMe' model}}
{{action 'triggerMe' on="mouse-over"}}
{{action 'pressALTKeyTiggerMe' allowedkeys='alt'}}
{{action "showDetailInfo" preventDefault=false}}>
export default Ember.Controller.extend({});
actions: {方法}
表单元素
路由
app/templates
app/router.js
{{#link-to ‘index’}} Home {{/link-to}} 路由切换
{{#link-to ‘about’}} about {{/link-to}}
{{#link-to ‘favorites’}} favorites {{/link-to}}
application主路由 主入口
application.hbs模板 {{outlet}} 例如App/index.js
index路由 this.route('index', { path: '/' });
路由嵌套
指定与路由关联的模型
加载适合的model,初始化数据,然后在模板上显示数据
Router.map(function() {
this.route('posts');
});
model: function() {
return this.store.query('post');
}
模板渲染
组件
ember new chapter4_components http://localhost:4200/
cd chapter4_components
ember server
自定义组件 经常使用的模板封装成组件
继承Ember.Component类
ember generate component my-component-name
app/components
app/templates/components
ember g route index Ember.Route.extend({model: function() {return [{放数据},{},{}]}})
each as遍历上面的model
自定义组件类 改变包裹组件的标签
Ember.Component.extend({})
属性传递
{{#each model as item}}
{{passing-properties-to-component item.title item.body 'third value' 'fourth value'}}
{{each}}
控制器
ember new chapter5_controllers
cd chapter5_controllers
ember server
模型
ember new chapter6_models
cd chapter6_models
ember server
ember install emberfire