#1 定义组件
来源:互联网 发布:ajaxupload.js cdn 编辑:程序博客网 时间:2024/05/01 00:58
英文原版:https://guides.emberjs.com/v2.13.0/components/defining-a-component/
定义组件,使用以下命令:
ember generate component my-component-name
组件在命名时,必须至少带一个”-“号。所以blog-post是一个合法的命名,audio-player-controls也是,但是post是不合法的。这会有效的避免与HTML元素的名称冲突。
一个简单的组件模板:
app/templates/components/blog-post.hbs<article class="blog-post"> <h1>{{title}}</h1> <p>{{yield}}</p> <p>Edit title: {{input type="text" value=title}}</p></article>
上面已经创建了一个组件,那么现在来使用它:
app/templates/index.hbs{{#each model as |post|}} {{#blog-post title=post.title}} {{post.body}} {{/blog-post}}{{/each}}
它使用路由中的model( )钩子返回的model:
app/routes/index.jsimport Ember from 'ember';export default Ember.Route.extend({ model() { return this.get('store').findAll('post'); }});
每个组件,在内部都是通过一个元素来实现的。默认的,Ember使用<div>元素来包裹你的组件模板。想要了解如何修改包裹元素,请查阅Customizing a Component’s Element。
定义组件的子类
通常,组件里封装的是可以重复使用的Handlerbars模板。在这种情况下,你不需要再去写任何的javascript代码。
如果你想自定义组件,那么你需要定义继承Ember.Component类。
Ember会基于文件名来执行组件。比如,如果你有个组件名叫blog-post,那么这个组件对应的js文件的地址为:app/components/blog-post.js
动态渲染组件
{{components}}助手可以帮你动态的去渲染一个组件。{{my-component}}总是固定的渲染my-component组件,但是如果你使用{{component}}助手,那么它可以帮助你自由的选择你要渲染的组件。如果你想基于数据与不同的第三方库交互,那么这个特性非常有用。使用{{component}}助手也可以帮你把不同的逻辑很好的分离。
{{component}}助手的第一个参数就是你要渲染的组件名,{{component ‘blog-post’}}等价于{{blog-post}}。
{{component}}真正的价值在于,可以动态的根据名称来渲染指定的组件。下面的例子通过使用{{component}}助手实现通过不同的post来显示不同的组件。
app/templates/components/foo-component.hbs<h3>Hello from foo!</h3><p>{{post.body}}</p>
app/templates/components/bar-component.hbs<h3>Hello from bar!</h3><div>{{post.author}}</div>
app/routes/index.jsimport Ember from 'ember';export default Ember.Route.extend({ model() { return this.get('store').findAll('post'); }});
app/templates/index.hbs{{#each model as |post|}} {{!-- either foo-component or bar-component --}} {{component post.componentName post=post}}{{/each}}
当传入{{component}}助手的参数是null或undefined时,助手什么也不会渲染。当参数变化时,当前的组件会被销毁,新的组件会被创建并展示。
动态的根据返回数据渲染不同的组件可以使你有能力展示不同的模板并保有不同的逻辑。{{component}}助手是帮你构建模块化代码的有力工具。
本节完
- #1 定义组件
- 组件定义
- 组件定义
- 规范、组件、中间件定义
- 表单组件定义
- 选项卡组件定义
- JavaScript 分页组件定义
- React 定义组件参数
- React定义组件
- vue 定义组件
- javaScript vue定义组件
- vue定义组件
- React Native 定义组件 引用组件
- 定义组件属性的缺省值
- 定义组件行为的方式
- android定义组件自动换行
- STL六大组件的定义
- React Native 定义组件(简单)
- 设置input 的 checkbox样式
- java.text.ParseException: Unparseable date:
- SAPUI5教程——Content Densities
- NOIP 2015 提高组 day2 解题报告
- 提升HBase写性能
- #1 定义组件
- onEditorAction不执行
- NXP JCOP系列芯片卡特点
- 二叉树基本算法
- 【LeetCode】16. 3Sum Closest
- Mysql技术内幕InnoDB存储引擎读书笔记--《六》锁
- 基于注解的关联关系Hibernate(2)——详解+源码
- 【Algorithm】习题8.14证明
- 三、装饰模式——设计模式学习笔记