加载脚本后的 Polymer Compute Binding

Question

我正在创建一个利用 moment.js 的 Polymer Web 组件。我创建了一个计算绑定，它接受一个日期和 returns 一个格式化为 moment.js 的字符串。问题是，有时此方法在应用程序加载 moment.js 库之前运行导致变量未定义错误。有没有一种方法可以等待 return 视图的值或在调用计算函数时延迟？

请参阅下面的代码示例：

<span>{{computedDate(date)}}</span>
<script>
    Polymer({
        ...
        computedDate: function(date) {
            return moment(date, "MM-DD-YYYY").fromNow()
        }
    })
</script>

Answer 1

如果您想确定 moment.js 已加载，您可以动态加载它并等待加载事件触发：

var script = document.createElement('script');
script.src = path/to/moment.js;
script.onload = function () {
  //here you know moment.js is loaded, so set the loaded "flag" to true
};

document.head.appendChild(script);

然后在您的计算绑定中观察加载标志的变化，仅在它为真时使用时刻：

<span>{{computedDate(date, loaded)}}</span>

加载脚本后的 Polymer Compute Binding

Polymer Compute Binding after a script has loaded

javascript

web-component

polymer

polymer-1.0