将Polymer与ES6类结合的又一次尝试。
它几乎可以正常工作,只是wct测试在带有导入的es6类的聚合物组件上随机失败(由systemjs执行)。据我了解,这是因为包含类定义的脚本在mocha执行测试后加载的。聚合物组件由两部分组成-html和javascript(将后者编译为es5),
的HTML:
<dom-module id="my-test">
<template>hello</template>
<script>
System.import('elements/my-test.js');
</script>
</dom-module>
javascript:
import {User} from 'elements/model/user.js';
Polymer({
is: "my-test",
method: function(){
console.log("method, user="+this.val);
},
ready: function(){
this.user= new User(); //this.user is randomly undefined
}
});
至少从本地主机加载时,这在浏览器中似乎相当稳定。但是,唯一可以“修复”测试的方法是延迟Polymer的就绪 call :
Polymer.whenReady = function (f) {
console.log("polymer ready");
setTimeout(f, 100);// "fix"
//f();
}
这意味着在某些时候所有这些都将在浏览器中失败(也许不是从本地主机提供服务时)。
我正在考虑以某种方式兑现系统注册的 promise ,并做出类似于HTMLImports.whenDocumentReady的内容,但是我仍然不清楚这一切如何工作。
因此,任何想法和建议都将受到高度赞赏!
该示例应用程序位于github上:
git clone https://github.com/bushuyev/test_test.git
cd test_test
git checkout tags/random_fail
npm install
bower install
gulp wct
要使成功多于失败-在wct.conf.js中将verbose更改为true。
更新类型:How to import system js SFX library
最佳答案
可以很好地一起使用Polymer,SystemJS和TypeScript(例如ES6,但添加了Polymer-friendly语法),也可以使用SystemJS处理HTML导入。那确实涉及到时序问题,我发布了一个small shim,它首先从webcomponents.js等待加载并捕获其ready事件(在其他代码没有机会看到它之前),然后加载Polymer并最终加载所有其他组件,并TypeScript代码。然后,它再次调度事件,以便Polymer完成自身的初始化。
这是an article about combining the technologies,其中包含提到的解决方案,可下载的代码和演示。
关于javascript - 随机失败的聚合物纤网组件测试,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31862834/