聚合物 1.x 铁 localstorage 奇怪的效果

Question

你好，我在 index.html:

<test2-element id="storage">
    <test-element></test-element>
</test2-element>

我的 test2 元素是：

<dom-module id="test2-element">
    <template >
        <iron-localstorage id="st" name="my-app-storage" value="{{session_user}}">
            <content></content>
        </iron-localstorage>
    </template>
    <script>
        addEventListener('WebComponentsReady', function () {
            Polymer({
                is: "test2-element",
                properties: {
                    session_user: {
                        type: Object
                    }
                }
            });
        });
    </script>
</dom-module>

我的测试是：

<dom-module id="test-element">
    <script>
        addEventListener('WebComponentsReady', function() {
            Polymer({
                is: "test-element",
                attached: function () {
                    this.async(function () {
                        console.log("Flag 1");
                        var pmn = document.querySelector('#storage');
                        console.log(pmn.get('session_user'));
                    });

                }
            });
        });
    </script>
</dom-module>

我的问题是控制台打印了两次 "Flag 1"。第一次 session_user 是未定义的，但第二次是用户从本地存储那里。这是它应该如何工作的吗？为什么测试元素中的附加回调被调用两次？

谢谢

Answer 1

您必须使用中介模式在 test2-element 和 test-element 之间共享 sessionUser。您可以在视频中了解有关中介模式的更多信息：https://www.youtube.com/watch?v=ZDjiUmx51y8&list=PLNYkxOF6rcICdISJclfQhj2S8QZGjXV8J&index=3

此外，最好将您的属性命名为 sessionUser 而不是 session_user。您可以作为会话用户访问 html 中的属性。

<test2-element id="storage" session-user="{{sessionUser}}">
    <test-element session-user="{{sessionUser}}"></test-element>
</test2-element>

您可以使用两种不同的方法解决您的问题。

方法 1：监听 test-element 中 sessionUser 的变化并进行 ajax 调用。

<dom-module id="test-element">
    <script>
        addEventListener('WebComponentsReady', function() {
            Polymer({
                is: "test-element",
                properties: {
                  sessionUser: { 
                    type: Object,
                    observer: '_sessionUserChanged'
                  }
                },
                _sessionUserChanged: function(newValue) {
                  //make the ajax call here.
                }
            });
        });
    </script>
</dom-module>

方法 2：iron-localstroage api 定义了两个事件，'on-iron-localstorage-load' 和 'on-iron-localstorage-load-empty'。您可以在这里阅读更多相关信息：https://elements.polymer-project.org/elements/iron-localstorage

您可以收听这些事件并启动您的代码。

<test2-element id="storage" session-user="{{sessionUser}}"
  on-iron-localstorage-load="sessionUserLoaded"
  on-iron-localstorage-load-empty="noSessionUser">
    <test-element session-user="{{sessionUser}}"></test-element>
</test2-element>

您可以在index.html 脚本文件中定义方法sessionUserLoaded 和noSessionUser。您可以参考聚合物入门工具包以了解如何为 index.html 文件中的元素定义聚合物函数。

聚合物 1.x 铁 localstorage 奇怪的效果

Polymer 1.x iron localstorage strange effect

javascript

local-storage

polymer-1.0