dom-如果无法在 firefox 中使用函数作为 "if" 值
dom-if can't use a function as the "if" value in firefox
下面的代码在 chrome 中运行良好,但在 firefox 中使用 polymer 1.9.1
时出现以下错误
[undefined::_annotatedComputationEffect]:计算方法hasMoreData
未定义
<template>
<template is="dom-repeat" items="[[sections]]">
<div>
<template is="dom-if" if="{{hasMoreData(item)}}">
<div name="loadMore">load more</div>
</template>
</div>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'listing-collection',
//...other stuff...
hasMoreData: function(item) {
return true;
}
});
});
</script>
这真的很令人沮丧,因为一些基本的东西似乎不像文档所说的那样在特定的现代浏览器中工作,而在另一个浏览器中工作正常。 :( 这样的事情让我对在生产中使用 polymer 感到紧张。我遇到了其他跨浏览器问题但解决了这些问题,但这次我认为框架终于把我推到了边缘 :)
所以我最终要做的就是将条件 "load more" 移动到它自己的组件中,就像这样
<load-more section="[[item]]"></load-more>
然后像这样在组件中使用 dom-if
<dom-module id="load-more">
<template>
<template is="dom-if" if="[[hasMoreData(section)]]">
load more
</template>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'load-more',
properties: {
section: {
value: {},
type: Object
}
},
hasMoreData: function (section) {
return section.Listings.length > 0 && section.Listings.length < section.Filter.Count;
}
});
});
</script>
我为什么要这样做?为什么它在 chrome 而不是 firefox 中以更简单的方式工作?
谁知道呢,但我遇到过太多与聚合物有关的奇怪问题,所以这不是巧合。
对不起,google,我真的很想喜欢 Polymer,但我开始后悔选择它了。一切都有一个学习曲线,但太多的东西在一个浏览器中运行良好,在另一个浏览器中完全失败,或者你只是尝试使用文档中所示的框架而触发奇怪的极端情况,其中一些是不正确的或过时的。
我认为 web components 有很大的潜力,但是 Polymer,至少我正在使用的版本,并不是 web components 的好广告。
不幸的是,这张关于 angular 的图表可能也适用于聚合物,我不得不同意 this guy's feelings about polymer。
我会努力使它适用于我当前的项目,因为我可能在这个兔子洞里走得太远了,现在无法改变我对技术的选择,但如果事情继续像以前那样发展,我有一种感觉我会尽可能避免使用聚合物。
下面的代码在 chrome 中运行良好,但在 firefox 中使用 polymer 1.9.1
时出现以下错误[undefined::_annotatedComputationEffect]:计算方法hasMoreData
未定义
<template>
<template is="dom-repeat" items="[[sections]]">
<div>
<template is="dom-if" if="{{hasMoreData(item)}}">
<div name="loadMore">load more</div>
</template>
</div>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'listing-collection',
//...other stuff...
hasMoreData: function(item) {
return true;
}
});
});
</script>
这真的很令人沮丧,因为一些基本的东西似乎不像文档所说的那样在特定的现代浏览器中工作,而在另一个浏览器中工作正常。 :( 这样的事情让我对在生产中使用 polymer 感到紧张。我遇到了其他跨浏览器问题但解决了这些问题,但这次我认为框架终于把我推到了边缘 :)
所以我最终要做的就是将条件 "load more" 移动到它自己的组件中,就像这样
<load-more section="[[item]]"></load-more>
然后像这样在组件中使用 dom-if
<dom-module id="load-more">
<template>
<template is="dom-if" if="[[hasMoreData(section)]]">
load more
</template>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'load-more',
properties: {
section: {
value: {},
type: Object
}
},
hasMoreData: function (section) {
return section.Listings.length > 0 && section.Listings.length < section.Filter.Count;
}
});
});
</script>
我为什么要这样做?为什么它在 chrome 而不是 firefox 中以更简单的方式工作?
谁知道呢,但我遇到过太多与聚合物有关的奇怪问题,所以这不是巧合。
对不起,google,我真的很想喜欢 Polymer,但我开始后悔选择它了。一切都有一个学习曲线,但太多的东西在一个浏览器中运行良好,在另一个浏览器中完全失败,或者你只是尝试使用文档中所示的框架而触发奇怪的极端情况,其中一些是不正确的或过时的。
我认为 web components 有很大的潜力,但是 Polymer,至少我正在使用的版本,并不是 web components 的好广告。
不幸的是,这张关于 angular 的图表可能也适用于聚合物,我不得不同意 this guy's feelings about polymer。
我会努力使它适用于我当前的项目,因为我可能在这个兔子洞里走得太远了,现在无法改变我对技术的选择,但如果事情继续像以前那样发展,我有一种感觉我会尽可能避免使用聚合物。