Question

我正在使用Polymer。

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

<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，并且只有在我调用{{1}时才能再次使用再次从组件对象中的某个地方。

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

Answer 1

我是Polymer的新手，但也许你可以使用全局变量？

<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>

请参阅polymer-project

上的API开发人员指南

变量数据丢失的技术原因

1 个答案: