polymer element removal, and multiple incremental uploads with polymer

71 views
Skip to first unread message

david.rod...@gmail.com

unread,
Jan 23, 2015, 3:51:50 PM1/23/15
to polym...@googlegroups.com

link(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();
       },
    });

ok so this works fine, on its own... although I have a basic app router that calls the file upload and navigation to the site. that goes something like this:

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;

        }
      },
   });
   })();

ok, so this works as well, my problem begins when i remove and re-render a new 'my-element' instance. when i upload such form it uploads an array of files pertinent to the history of files uploaded in previous visits. I was sure it had to do with removing the element properly from the dom on polymer, tried resetting the form on each time viewed the element. no dice. I need help! hahaha

also, i've tried calling elements locally through a fire event and do a this.remove(); when I do a this.remove i get an error saying this is undefined or null, so i'm having a hard time pinpointing whenre the problem occours

thanks in advance

Reply all
Reply to author
Forward
0 new messages