发布于 2015-08-18 16:32:27 | 227 次阅读 | 评论: 0 | 来源: 网络整理
希望可以为应用创建一个可以重用的Tweet按钮。
编写一个自定义组件，使用传入的特定属性渲染Tweet按钮。
1 2 3 4 5 |
{{share-twitter data-url="http://emberjs.com"
data-text="EmberJS Components are Amazing!"
data-size="large"
data-hashtags="emberjs"}}
|
1 2 3 4 5 |
App.ShareTwitterComponent = Ember.Component.extend({
tagName: 'a',
classNames: 'twitter-share-button',
attributeBindings: ['data-size', 'data-url', 'data-text', 'data-hashtags']
});
|
在HTML代码中包含Twitter的控件：
1 |
<script type="text/javascript" src="http://platform.twitter.com/widgets.js" id="twitter-wjs"></script> |
Twitter的控件库希望能在页面上找到一个设置了特定data-属性的<a>标签。当其被点击时，会采用这些属性的值来打开一个iFrame，用于提供Twitter的分享。
share-twitter组件采用了四个选项来对应该<a>标签的四个属性：data-url，data-text，data-size，data-hashtags。这些选项及其值成为组件对象的属性。
组件通过attributeBindings属性，定义了一些作为对象绑定属性的HTML表示的属性。当这些属性的值发生改变时，组件的HTML元素属性也会发生相应的变化。
通过tagName和classNames属性设定了对应的标签和CSS类。