EmberJS 组件
介绍Ember.js组件使用W3C Web组件规范，这些组件提供真正的封装UI小部件。它包含三个主要规范作为模板，shadow DOM和自定义元素。组件在数据模板名称中声明具有路径名称而不是纯字符串。组件前面加上“components /”，是告诉Ember.js我们正在处理的组件模板而不是常规应用程序模板。<script type="text/x-handlebars">
//component name
{{my-name}}
</script>
<script type="text/x-handlebars" data-template-name="components/my-name">
// This is component
</script>
在上面的代码中，my-name是在data-template-name中声明为components / my-name的组件的名称。例子<!DOCTYPE html>
<html>
<head>
<title>Emberjs Components</title>
<!-- CDN's-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="https://builds.emberjs.com/release/ember.debug.js"></script>
<script src="https://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="index">
<!-- defining the component name -->
{{my-name tag="Tutorialspoint.."}}
</script>
<script type="text/x-handlebars" data-template-name="components/my-name"> <!-- this is component 'my-name' -->
<h2>Tag: </h2>
<h3>{{tag}}</h3>
</script>
<script type="text/javascript">
App = Ember.Application.create();
</script>
</body>
</html>输出让我们执行以下步骤，看看上面的代码如何工作：将上面的代码保存在component.html文件中在浏览器中打开此HTML文件。让我们通过点击下面的链接查看一些关于组件的更多详细信息： 定义组件 将属性传递到组件 在组件中包装内容 自定义组件元素 处理用户与操作的交互 从组件的操作发送到应用程序