即使数据发生了变化，观察对象路径的聚合物1.0观察者也不会触发

jsFiddle: https://jsfiddle.net/litahl/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>

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

Problem: '_toggleItemsChanged(_toggleItems.*)'触发一次，这是第一次，但即使_toggleItems中的数据发生了变化，也不会再次触发。

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

启动时都触发。

来回切换'hi:a'和'hi:b'。
- 任何火灾。
'Single Toggle'触发，所以我切换那个，我的断点命中。
- 评估this._toggleItems;
- 嗯，你们都被设置为true。您可以将'hi:a'和'hi:b'切换为false并重新进行测试。现在它们都被设置为false。

为什么不触发观察者:['_toggleItemsChanged(_toggleItems.)'， '_singleToggleChanged(_singleToggle.)']，用于数据更改?

预期:我希望_toggleItemsChanged函数与changeRecord一起调用。_toggleItems.a.路径_toggleItems.a。检查安排。

我不知道我是否能正确理解你的例子，但我相信你是在试图观察更深层次的子属性变化。这行不通。

观察者不能看得更深。它们只在使用时观察第一级属性的变化。如果需要更深入，则需要观察其他路径，如_toggleItems.a。

相关内容

最新更新

热门标签：