变量数据丢失的技术原因

Technical reason of data loss of variable

本文关键字：技术 数据 变量      更新时间：2023-09-26

我正在使用聚合物。

聚合物组件绑定到处理其逻辑的脚本。它看起来像这样：

<polymer-element name="my-component">
  <template></template>
  <script src="my-component.js"></script>
</polymer-element>

该组件是通过将对象传递给 Polymer 函数来生成的。此对象描述组件，并且必须至少包含一个名为 ready 的属性。这是一个每次生成组件时都会触发的函数，例如，当脚本第一次被调用时，以及每次在初始调用之后使用它时。

这是我的my-component.js 

var Timeline;
function loadTimeline(){
  return System.import('balance/timeline/TimeLineModule')
    .then(function(TM){
       Timeline = TM.service;
     });
 };
loadTimeline()
 .then(function(){
     var element = (function
     var component;
     return{
        ready: function(){
          var self = this;
          component = this;
          methodThatUtilizesTimelineModule();
        }
     }
})();
  Polymer('day-view',element);
})
.catch(function(e){console.error(e)});

我现在的问题是，只要第一次调用脚本，一切正常。但是，一旦我离开组件并调用另一个组件，然后返回到属于上述脚本的组件，Timeline将被undefined，并且只有在我从组件对象中的某个地方再次调用loadTimeline()时才能再次使用。

所以我知道问题是每当我离开调用该脚本的组件时，我的变量的值都会丢失，但我不知道为什么会这样。

我对聚合物很陌生，但也许你可以使用全局变量？

<polymer-element name="app-globals">
  <script>
  (function() {
    // these variables are shared by all instances of app-globals
    var firstName = 'John';
    var lastName = 'Smith';
    Polymer({
       ready: function() {
         // copy global values into instance properties
         this.firstName = firstName;
         this.lastName = lastName;
       }
    });
  })();
  </script>
</polymer-element>

然后像这样使用它

<polymer-element name="my-component">
  <template>
    <app-globals id="globals"></app-globals>
    <div id="firstname">{{$.globals.firstName}}</div>
    <div id="lastname">{{$.globals.lastName}}</div>
  </template>
  <script>
    Polymer({
      ready: function() {
        console.log('Last name: ' + this.$.globals.lastName);
      }
    });
  </script>
</polymer-element>

请参阅有关聚合物项目的 API 开发人员指南

相关文章：