Polymer 聚合物2.0中的全局函数
有没有办法在Polymer 2.0中声明可用于其他组件的全局函数?我有一个moment.html文件,用于在项目中使用moment.js: 在同一个文件中,我还声明了一个函数,而不是在我要使用它的每个组件中声明它: 函数格式化日期{ 返回momentdate。格式为“dddd,D MMMM YYYY”; } 导入文件后,矩对象可用,但当我尝试调用format函数时,它会给我一个警告方法“format”未定义。如何使该功能公开 编辑:我可以从另一个组件的脚本标记中调用format函数,但无法从模板中访问它,即使用: [[formatevent.date]]Polymer 聚合物2.0中的全局函数,polymer,polymer-2.x,Polymer,Polymer 2.x,有没有办法在Polymer 2.0中声明可用于其他组件的全局函数?我有一个moment.html文件,用于在项目中使用moment.js: 在同一个文件中,我还声明了一个函数,而不是在我要使用它的每个组件中声明它: 函数格式化日期{ 返回momentdate。格式为“dddd,D MMMM YYYY”; } 导入文件后,矩对象可用,但当我尝试调用format函数时,它会给我一个警告方法“format”未定义。如何使该功能公开 编辑:我可以从另一个组件的脚本标记中调用format函数,但无法从模板
我希望在页面上呈现函数的结果,而不是以编程方式访问它。以下是我如何使用它的示例
<paper-button on-tap="customfunc"> Test </paper-button>
<div><strong>[[format(date)]]</strong></div> // result at screen: Saturday, 20 January 2018
...
<script>
class MyTest extends Polymer.Element {
static get is() { return 'test-component'; }
ready(){
super.ready();
this.set('date', new Date())
}
customfunc() {
var d = new Date();
var dd = this.format(d);
console.log("d ", d, " - dd = ", dd);// d Sat Jan 20 2018 17:02:38 GMT+0300 (Türkiye Standart Saati) - dd = Saturday, 20 January 2018
}
format(date){
return moment(date).format('dddd, D MMMM YYYY');
}
由于format_函数位于shadow root中,因此必须使用.shadowRoot.querySelector
下面是我的工作代码,在这里,我在第1页有格式函数,我在第2页调用它
类MyApp扩展了Polymer.Element{
静态get是{
返回“我的应用程序”
}
建造师{
超级的
}
}
window.customElements.defineMyApp.is,MyApp;
类MyPage1扩展了Polymer.Element{
静态get是{
返回“my-page1”;
}
建造师{
超级的
}
格式函数{
警报格式功能;
}
}
window.customElements.defineMyPage1.is,MyPage1;
单击以测试格式功能。。。。。!
类MyPage2扩展了Polymer.Element{
静态get为{return'my-page2';}
试验{
var host=document.querySelector'my-app'。shadowRoot.querySelector'my-page1';
host.format_函数;
}
}
window.customElements.defineMyPage2.is,MyPage2;
我认为,对于你的任务来说,最好的文件是莫妮卡·迪库莱斯库自己的备忘单 她是一名聚合物开发者。下面是我从链接复制粘贴。这是一个扩展的MyMixinPolymer.Element,它发挥了神奇的作用 定义类表达式mixin以在不同元素之间共享实现:
<script>
MyMixin = function(superClass) {
return class extends superClass {
// Code that you want common to elements.
// If you're going to override a lifecycle method, remember that a) you
// might need to call super but b) it might not exist
connectedCallback() {
if (super.connectedCallback) {
super.connectedCallback();
}
/* ... */
}
}
}
</script>
在元素定义中使用mixin:
<dom-module id="element-name">
<template><!-- ... --></template>
<script>
// This could also be a sequence:
//class MyElement extends AnotherMixin(MyMixin(Polymer.Element)) { … }
class MyElement extends MyMixin(Polymer.Element) {
static get is() { return 'element-name' }
/* ... */
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
我已经测试过了。在我自己这方面做得很好,只需尝试将formatdate{..更改为myFormatdata即可{等……看看哪种格式函数给出了“格式化”未定义…我是指MyFrase/SimultDeal.Frase..还考虑用MyFraseDATE调用MyFraseFor函数,哦,你说得对,这个函数可以从另一个组件的脚本标签中访问。但是,我试着从模板中调用它。我更新了我的问题。同样,下面我用模板中的一个按钮调用了函数。谢谢你的回答,但是1 format函数应该在另一个文件中定义,2它应该直接从模板中调用,而不是从脚本标记中调用。我想在页面上呈现format的结果。嗯,另一个文件是此元素的子元素或父元素在每个元素之间调用函数有多种方法。此外,调用[[formatevent.date]]也是一样的,我会在得到信息后更新我的答案。@yberg,我更新了代码,它是如何从模板调用的。另外,为了了解更多信息,请检查此链接以调用元素之间的函数:谢谢,这看起来很有希望。我明天会尝试。