EmberJS组件

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"&gt;&lt;/script&gt;

<script src="https://code.jquery.com/jquery-2.1.3.min.js"&gt;&lt;/script&gt;

<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"&gt;&lt;/script&gt;

<script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"&gt;&lt;/script&gt;

<script src="https://builds.emberjs.com/release/ember.debug.js"&gt;&lt;/script&gt;

<script src="https://builds.emberjs.com/beta/ember-data.js"&gt;&lt;/script&gt;

</head>

<body>

<script type="text/x-handlebars" data-template-name="index">

<!-- defining the component name -->

{{my-name tag="Tutorialspoint.."}}

</script>

 &lt;script type="text/x-handlebars" data-template-name="components/my-name"&gt;

&lt;!-- this is component 'my-name' --&gt;

&lt;h2&gt;Tag: &lt;/h2&gt;

&lt;h3&gt;{{tag}}&lt;/h3&gt;

&lt;/script&gt;

&lt;script type="text/javascript"&gt;

App = Ember.Application.create();

&lt;/script&gt;

</body>

</html>输出让我们执行以下步骤,看看上面的代码如何工作:将上面的代码保存在component.html文件中在浏览器中打开此HTML文件。让我们通过点击下面的链接查看一些关于组件的更多详细信息: 定义组件 将属性传递到组件 在组件中包装内容 自定义组件元素 处理用户与操作的交互 从组件的操作发送到应用程序