Question

我只是尝试将我的Polymer Website更新到版本1.0，但我的array-observer-function不再起作用了。所以我查看了文档并注意到，有一种新的方法来观察推送和放大流行变化。

为了测试这些更改，我复制了Polymer docs中的代码，但即使该示例也不起作用......这是我尝试测试示例脚本：

<!doctype html>
<html>
<head>
  <title>Test</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> 
    <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="/bower_components/polymer/polymer.html">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <my-index></my-index>
</body>
</html>
<dom-module id="my-index">
<script>
    Polymer({
        is: "my-index",
        properties: {
            users: {
                type: Array,
                value: function() {
                    return [];
                }
            }
        },

        observers: [
            'usersAddedOrRemoved(users.splices)'
        ],
        ready: function(){
            this.addUser();
        },
        usersAddedOrRemoved: function(changeRecord) {
            console.log(changeRecord);
            changeRecord.indexSplices.forEach(function(s) {
                s.removed.forEach(function(user) {
                    console.log(user.name + ' was removed');
                });
                console.log(s.addedCount + ' users were added');
            }, this);
        },

        addUser: function() {
            this.push('users', {name: "Jack Aubrey"});
        }
  });
</script>
</dom-module>

javascript-console只是说Uncaught TypeError: Cannot read property 'indexSplices' of undefined。有什么想法是错的吗？

Answer 1

在创建users数组时（使用未定义的changeRecord），usersAddedOrRemoved函数在开始时触发。如果您处理未定义的内容，您将看到它按预期工作，并在开始时和添加的用户上触发。

            <!DOCTYPE html>
            <html lang="en">
            <head>
            <meta charset=utf-8>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title></title>


            <link rel="stylesheet" href="http://keeleyknight.com/styles.css">
            <link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans' rel='stylesheet' type='text/css'>
            <script src="http://keeleyknight.com/_js/jquery-1.9.0.min.js"></script>
            <script type="text/javascript" src="http://keeleyknight.com/_js/modernizr.custom.86080.js"></script>
            <script src="_js/myscripts.js"></script>

            </head>

            <body>

            <div id="wrapper">
                <div id="content">
                    <div class="kk_background">
                        <div class="container">
                            <div class="blog">
                                <div class="contact_content">
                                    Blog Goes here

                                </div>
                            </div>
                        </div>
                    </div>
                </div>   
                <!-- / Homepage -->


            </div>
            </body>
            </html>

Polymer 1.0观察阵列

1 个答案: