Question

我有一个聚合物元素，它使用从ji中的api加载的构造函数值动态加载。例如：

ink(rel="import", href="/bower_components/polymer/polymer.html")
link(rel="import", href="/bower_components/core-ajax/core-ajax.html")

polymer-element(name='my-element', constructor='MyElement')
  template
     a(id='send', on-click='{{fileUpload}}')
     form(id='filePost', action='', method='POST', accept-charset='utf-8', enctype='multipart/form-data')
        input(id='fileinput', name='file', type='file')
  script.
    Polymer({
       ready: function(){
         //do something
       },
       launch:function(){
        // prepare polymer element
       },
       fileUpload:function(){
          // create XHR request and post file and on complete event exit to home view
       },
       exitUploader:function(){
          history.pushState(null, null, '/home');
          this.fire('goUrl');
          this.remove();
       },
    });

好的，所以这个工作正常，自己...虽然我有一个基本的应用程序路由器调用文件上传和导航到该网站。这是这样的：

link(rel='import', href='/bower_components/polymer/polymer.html')
link(rel='import', href='/polymer/my-element') //api that returns jade to rendered html

polymer-element(name='router', attributes='attributes')
template
   div(class='container', id='appView')
script.
   (function(){
var routerView = document.querySelector('router')  
   //listen for 'navigate event' and render view
   addEventListener('goUrl',function(e){
      routerView.navigation(e);
   });
   Polymer({
      ready:function(){
        //do something
      },
      launch:function(){
        // prepare polymer element
      },
      navigation: function(){
        var self = this;
        event.preventDefault();
        event.stopPropagation();
        this.location = window.location.pathname;
        switch(true){
           case(self.location == '/maker'):
              var maker = new MyElement();
              maker.launch();
              this.$.appView.firstChild.remove();
              this.$.appView.appendChild(maker);
           break;
           case(self.location == '/anotherlocation'):
              var anyOtherElement = newPolymerElement();
              this.$.appView.firstChild.remove();
              this.$.appView.appendChild(anyOtherElement);
           break;

        }
      },
   });
   })();

好的，所以这也有效，当我删除并重新渲染一个新的'my-element＆＃39;实例。当我上传这样的表格时，它会上传一系列与先前访问中上传的文件历史相关的文件。我确信它与从聚合物上的dom中正确地移除元素有关，尝试在每次查看元素时重置表单。没有骰子。我需要帮助！哈哈哈

提前致谢

Answer 1

我很确定问题出在这里：

var routerView = document.querySelector('router')  
   //listen for 'navigate event' and render view
   addEventListener('goUrl',function(e){
      routerView.navigation(e);
   });

您正在生命周期挂钩之外添加侦听器，而不是在从DOM中删除该元素时删除侦听器。即使元素在DOM之外，它仍然会触发回调。

如果您正确清理视图，问题应该解决

Polymer({
    ready: function(){
        // add listeners
        window.addEventListener('goUrl', this.navigation);
    },
    detached: function(){
        // remove listeners
        window.removeEventListener('goUrl', this.navigation);
    },
    ...
});

删除聚合物元素，文件上传逐步在实例上添加更多文件

1 个答案: