我正在尝试学习 polymer ,并且正在尝试制作一个基本的消息传递框架。所以我创建了一个名为 messages-framework 的小 polymer 元素,它将显示消息,并在 3 秒后删除该消息。如何公开向该元素添加消息的方法? 这是我的 polymer 元件
<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<polymer-element name="messages-framework">
<template>
<ul>
<template repeat="{{ m in messages }}">
<li>{{ m }}</li>
</template>
</ul>
<paper-input-decorator label="message" floatinglabel>
<input is="core-input" value="{{ message }}" type="text">
</paper-input-decorator>
<paper-button raised on-tap="{{ addMessage }}">Add Message</paper-button>
</template>
<script>
Polymer({
messages: [],
addMessage: function () {
this.messages = this.messages.concat(this.message);
setTimeout(this.removeMsg.bind(this, this.message), 3000);
this.message = "";
},
removeMsg: function (msg) {
this.messages = this.messages.filter(function (m) {
return msg !== m;
});
}
});
</script>
</polymer-element>
如有任何帮助,我们将不胜感激!
我认为我的问题表述得不好。如果有两个 polymer 元素,例如 messages-framework 和 newuser-form,如果 newuser-form 需要添加到 messages-framework,该 polymer 元素将如何使用 messages-framework API?
最佳答案
在 Polymer 中公开 API 就像在日常元素中所做的那样。
- 获取对元素的引用。例如 var p = document.getElemnetTagName('p');
- 使用它的方法。例如 p.innerHTML = "Hello World" 或 p.setAttribute(attribute,value)
示例:
您的自定义元素
<polymer-element name="messages-framework">
<template>
//all your core markup
</template>
<script>
Polymer({
messages: [],
addMessage: function () {
this.messages = this.messages.concat(this.message);
setTimeout(this.removeMsg.bind(this, this.message), 3000);
this.message = "";
},
removeMsg: function (msg) {
this.messages = this.messages.filter(function (m) {
return msg !== m;
});
}
});
</script>
</polymer-element>
使用它的API
<body>
//Initialing the Element by loading it on to the page
<messages-framework></messages-framework>
<script>
var messagesFramework = document.getElementsByTagName('messages-framework');
//this will call the addMessage() method of the element
messagesFramework.addMessage();
</script>
</body>
关于javascript - 暴露 polymer 中的 API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28824572/