Question

我正在尝试使用聚合物的core-list扩展名。我使用了来自This YT Link

的Google Developers中的示例

我将is="auto-binding"值添加到我的模板中我发送错误：

Uncaught TypeError: Cannot set property 'data' of null

我也试图将height: 100%设置为core-list，它也无效，我收到警告：

core-list must either be sized or be inside an overflow:auto div that is sized

下面我要添加我的代码：

    <link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/core-list/core-list.html">
<link rel="import" href="../bower_components/core-pages/core-pages.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<!--{{hash}-->
<polymer-element name="progress-page" attributes="hash">
    <template>
                    <template is="auto-binding" id="app" style=" height:100%; overflow: auto;">
                        <core-list data="{{data}}" flex style=" height:100%;">
                            <template>
                                <div class="row" layout horizontal center>
                                    <div data-index="{{index}}">{{model.name}}</div>
                                </div>
                            </template>
                        </core-list>
                    </template>

</template>

    <script>
        Polymer('progress-page', {
            ready: function () {
                this.selected = 0;
                var app = document.querySelector('#app');
                app.data = generateContacts();

                function generateContacts() {
                    var data = [];
                    for (var i = 0; i < 1000; i++) {
                        data.push({
                            name: 'dddd',
                            string: 'asd'
                        });
                    }
                    return data;
                }
            }
        });

    </script>
</polymer-element>

凸轮有人请告诉我有什么问题？这是我添加的链接的1：1版本。

Answer 1

你不应该在里面使用template is="auto-binding" 一个Polymer元素。自动绑定模板的重点在于它允许您在外部设置数据绑定一个Polymer元素。

所以你在这里结合了两个概念。如果您在主页中使用自动绑定模板，则会使用这两行：

var app = document.querySelector('#app'); app.data = generateContacts();

在这里，您尝试检索对自动绑定模板的引用，并向其添加数据属性。

这不适用于您的上下文。 '＃app'位于<progress-page>的影子DOM中，因此document.querySelector无法找到它。

另一方面，这一行是向<progress-page>元素添加一个属性，如果你在一个元素中使用core-list，这是正确的做法：

this.selected = 0;

因此，如果您想使用自动绑定模板，请删除Polymer元素并使用第一种方法（querySelector并指定app.data，app.selected）。

如果要创建Polymer元素，请删除自动绑定模板并使用第二种方法：

this.data = generateContacts(); this.selected = 0;

以下是此代码的工作版本，其中删除了自动绑定模板：

http://jsbin.com/lofega/2/edit

模板自动绑定时出现聚合错误

1 个答案: