阅读(3276)
赞(1)
EmberJS 组件
2016-12-19 18:25:01 更新
介绍
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文件。
让我们通过点击下面的链接查看一些关于组件的更多详细信息：