Question

jsFiddle：https://jsfiddle.net/ghstahl/09tL1ku7/

<script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/polymer/polymer.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-styles/paper-styles.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-styles/color.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-styles/default-theme.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-ripple/paper-ripple.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-behaviors/paper-inky-focus-behavior.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-checked-element-behavior/iron-checked-element-behavior.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-input/paper-input.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-button/paper-button.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-flex-layout/classes/iron-shadow-flex-layout.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-menu-button/paper-menu-button.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-behaviors/iron-control-state.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-behaviors/iron-button-state.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-icons/iron-icons.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-icon/iron-icon.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-selector/iron-selector.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-item/paper-item.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-behaviors/paper-button-behavior.html">
<dom-module id="pingo-toggle">
<style>
    .line {
        margin-bottom: 40px;
    }
    .line span {
        margin-left: 24px;
    }
</style>
<template>
    <div class="line">
        <paper-toggle-button checked={{singleToggle.data}}></paper-toggle-button> <span>{{singleToggle.label}}</span>
<span>{{computeBooleanToString(singleToggle.data)}}</span>

    </div>
    <template is="dom-repeat" items="{{_workingArray}}">
        <div class="line">
            <paper-toggle-button checked={{item.value.data.checked}}></paper-toggle-button> 
<span>{{item.value.label}}</span>
<span>{{item.value.id}}</span>
<span>{{computeBooleanToString(item.value.data.checked)}}</span>

        </div>
    </template>
</template>
<script>
    (function() {
        Polymer({
            is: 'pingo-toggle',
            properties: {

                singleToggle: {
                    type: Object,
                    notify: true
                },

                toggleItems: {
                    type: Object,
                    notify: true,
                    observer: '_toggleItemsChanged'
                },
            },
            _toggleItemsChanged: function(newValue, oldValue) {
                if (this.toggleItems !== undefined) {
                    this._workingArray = this._toArray(this.toggleItems);
                }
            },
            _toArray: function(obj) {
                var index = 0;
                var thisElement = this;
                this._arrayData = Object.keys(obj).map(function(key) {
                    var id = "item_" + index;
                    ++index;
                    var val = {};
                    val.data = obj[key];
                    val.label = "hi:" + key;
                    val.data = obj[key];
                    val.id = id;
                    val.original = obj.key;
                    return {
                        name: key,
                        value: val
                    };
                });
                return this._arrayData;
            },
            computeBooleanToString: function(a) {
                return a === true ? 'true' : 'false';
            }
        });
    })();
</script>
</dom-module>
<dom-module id="pingo-toggle-container">
<style>
</style>
<template>
    <pingo-toggle single-toggle={{_singleToggle}} toggle-items={{_toggleItems}}></pingo-toggle>
    <paper-item>{{_singleToggleHello}}</paper-item>
    <paper-item>{{_toggleItemsHello}}</paper-item>
</template>
<script>
    (function() {
        Polymer({
            is: 'pingo-toggle-container',
            properties: {
                _singleToggleHello: {
                    type: String,
                    notify: true,
                    value: "Well Hello There"
                },
                _toggleItemsHello: {
                    type: String,
                    notify: true,
                    value: "Hi there from many"
                },

                _singleToggle: {
                    type: Object,
                    notify: true,
                    value: {
                        label: "Single Toggle",
                        data: true
                    }
                },
                _toggleItems: {
                    type: Object,
                    notify: true,
                    value: {
                        a: {
                            label: "a Toggle2",
                            checked: true
                        },
                        b: {
                            label: "a Toggle2",
                            checked: false
                        }
                    }
                }
            },

            // Observers
            /////////////////////////////////////////////////////////
            observers: ['_toggleItemsChanged(_toggleItems.*)', '_singleToggleChanged(_singleToggle.*)'],
            // Smart check. only fire if we change state.
            _singleToggleChanged: function(changeRecord) {
                var thisElement = this;

                this._singleToggleHello = this.computeBooleanToString(this._singleToggle.data) + Math.random() + changeRecord.path;
                console.log("_singleToggle in pingo-toggle-container changed:" + changeRecord.path);

            },
            _toggleItemsChanged: function(changeRecord) {
                var thisElement = this;

                this._toggleItemsHello = "_workingToggleItemsChanged fired" + Math.random() + changeRecord.path;

                console.log("pingo-toggle-container notWorking:" + changeRecord.path);

            },
            computeBooleanToString: function(a) {
                return a === true ? 'true' : 'false';
            },

            ready: function(e) {

            }
        });
    })();
</script>
</dom-module>
<pingo-toggle-container></pingo-toggle-container>

场景：父元素拥有一个数据对象。父元素将数据对象的一部分传递给子元素，子元素绑定到对象中的值。当子项更改值时，因为它们具有对象引用，所以数据将直接在父拥有的主数据对象中更改。

问题：'_ toggleItemsChanged（_toggleItems。*）'触发一次，这是第一次，但即使_toggleItems中的数据发生了变化，也不会再次触发。

证明：在pingo-toggle-container元素中;

在_singleToggleChanged和_toggleItemsChanged上放置一个断点。
- 两人都在启动时开火。
来回切换'hi：a'和'hi：b'。
- 没什么可火的。
所以我将'hi：a'和'hi：b'都设为True。
'Single Toggle'确实触发，所以我切换它并且我的断点命中。
- 评估this._toggleItems;
- 嗯，你们两个都是真的。您可以将'hi：a'和'hi：b'切换为false并重做测试。现在他们都被设置为假。

为什么你不发射观察者：['_toggleItemsChanged（_toggleItems。）'，'_ singleToggleChanged（_singleToggle。）']，用于数据更改？

预期：我希望使用_toggleItems.a.checked或_toggleItems.a.checked的changeRecord.path分别调用_toggleItemsChanged函数。

Answer 1

我不知道我是否能理解你的例子，但我相信你正试图观察更深层次的属性变化。它不起作用。

观察者无法更深入地观察。只有在使用时，它们才会观察第一级属性更改。如果你需要更深入，你需要观察其他路径，如_toggleItems.a。等。

观察对象路径的Polymer 1.0观察者即使数据已更改也未触发

1 个答案: