zoukankan      html  css  js  c++  java
  • 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
    

      

  • 相关阅读:
    docker学习-docker核心技术
    Ecmall 中国地区设置
    lazyload.js实现图片异步载入
    inpyt 按钮变透明 边框
    vertical-align0 垂直对齐- 图片 兼容个浏览器
    div文字超出
    jquery满屏滚动代码
    $().index() 两种用法
    setTimeout不断重复执行
    background属性
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12930992.html
Copyright © 2011-2022 走看看