将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/

10-13 07:38