Question

我正在努力让以下工作。它最初当然会呈现parentItems的内容，但是在更改它时，不会调用在parentItems上循环的模板。我查看了notifyPath，但不确定这是否是正确的方向

<!doctype html>
<html>
    <head>
        <script src='bower_components/webcomponentsjs/webcomponents-lite.min.js'></script>
        <link rel='import' href='bower_components/paper-button/paper-button.html'>
    </head>
    <body>
        <dom-module id='my-element'>
            <template>
                <template is='dom-repeat' items='{{parentValues}}'>
                    <template is='dom-repeat' items='{{item.childValues}}'>
                        <div>{{item.value}}</div>
                    </template>
                </template>
                <paper-button on-tap='click'>click me</paper-button>
            </template>
        </dom-module>
        <script>
            Polymer({
                is: 'my-element',
                properties: {
                    parentValues: {
                        type: Array,
                        value: function() { return [ { childValues: [ { value: 'original value' } ] } ]}
                    }
                },

                click: function() {
                    this.parentValues[0].childValues[0].value = 'new value';
                }
            });
        </script>
        <my-element></my-element>
    </body>
</html>

我怎样才能让它发挥作用？

万分感谢： - ）

Answer 1

我认为@jeanPokou解决的问题是你需要使用'this.set（Object，New Value）'来设置嵌套对象的值。

您可以在“Ask Polymer”系列中查看此视频，详细了解不更新嵌套值的原因：https://youtu.be/0GxteaIaj2Q

Answer 2

您需要在绑定中使用dom-repeat as作用域，并在更改时使用notifyPath冒泡更改数据

＆＃13;

<!doctype html>
<html>
    <head>
        <script src='bower_components/webcomponentsjs/webcomponents-lite.min.js'></script>
        <link rel='import' href='bower_components/paper-button/paper-button.html'>
    </head>
    <body>
        <dom-module id='my-element'>
            <template is='dom-repeat' items='{{parentValues}}' as ="parent">
                    <template is='dom-repeat' items='{{parent.childValues}}' as="child">
                        <div>{{child.value}}</div>
                    </template>
                </template>
                <paper-button on-tap='click'>click me</paper-button>
            </template>
        </dom-module>
        <script>
            Polymer({
                is: 'my-element',
                properties: {
                    parentValues: {
                        type: Array,
                        value: function() { return [ { childValues: [ { value: 'original value' } ] } ]}
                    }
                },

                click: function() {
                // notify path to the properties using the polymer syntax
                    this.set('parentValues.0.childValues.0.value','changed value');
                }
            });
        </script>
        <my-element></my-element>
    </body>
</html>

＆＃13;

Polymer 1.0深层路径数组绑定

2 个答案: