Question

如下所示的代码在chrome中运行良好，但在firefox中，使用聚合物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>

这真的很令人沮丧，基本的东西似乎不像文档在特定的现代浏览器中说的那样工作，而在另一个浏览器中工作得很好。 :(像这样的东西让我对生产中使用聚合物感到紧张。我遇到了其他跨浏览器的问题，但解决了它们，但这次我认为框架终于让我超越了边缘：）

Answer 1

所以我最终要做的是将条件“加载更多”移动到它自己的组件，如此

<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组件有很多潜力，但Polymer，至少我正在使用的版本，不是Web组件的好广告。

不幸的是，这个关于角度的图表也适用于聚合物，我必须同意this guy's feelings about polymer。

我会尝试让它适用于我当前的项目，因为我可能已经在这个兔子洞里走得太远以改变我现在的技术选择，但是如果事情继续发展，我会有一种感觉，我会尽可能避免使用聚合物。

dom-if不能使用函数作为＆＃34; if＆＃34; firefox中的值

1 个答案: