ember

类
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

  

posted on 2020-05-21 15:19  左侧岚  阅读(162)  评论(0编辑  收藏  举报

导航