javascript - Polymer 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 未定义，但第二次用户来自本地存储。这是它应该如何工作的吗？为什么 test-element 中附加的回调被调用两次？

谢谢

Answer 1

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

此外，最好将您的属性命名为 sessionUser 而不是 session_user。您可以以 session 用户身份访问 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文件中的元素定义聚合物函数。