Skip to main content

How I solved programmatically updating window.location from a child element in a subroute using events and app-route

untitled

<app-route>

I was having trouble figureing out how to programaticlly change window.location 
from a nested child element. In my case I wanted to send up a uri from dropdown.  
The `select-item` property was bound to  `location`, and `location` had an 
observer `_updateLocation`. 
        <x-dropdown selected-item={{location}}></x-dropdown>
        location:{
            type:Object,
            observer: '_updateLocation' 
        } 
I could have set `notify:true` on `location`, but then I would have to pass it 
up the chain. Instead I decided to use an event. 
        _updateLocation: function(item){
            this.fire('update-location-request', {
                uri: location.link
            })
        }
On the element that contians the `app-location` I set up a property called `location`
,it also has an `observer:'_updateLocation'` (these don't have to be named the same 
as on the child, it just worked out that way), . Finally I set up a listener for
`update-location-request`.
        <app-location route="{{route}}" use-hash-as-path></app-location>
        //property
        location:{
            type: String,
            observer:'_updateLocation'
        }

        //Methods
        _setRoute: function(){
            this.set('route.path', this.location)
        },  
        _updateLocation: function(e) {
          // will not call `_setRoute` more than once per 100ms
          this.debounce('update-location', function() {
            this._setRoute()
          }, 100);
        },
        ready: function(){
            this.addEventListener('update-location-request', function(e){
                this.location = e.detail.uri
            })
        }

this.debounce

The `debounce` allows things to catch up. It is `debounce` that makes this all work. 
With out it when you use the back button things get wonky, when a subroute triggers 
load of the drop down on the way back in browser history `location` get changed 
mulitple times and `debounce` restores some sanity.

The gist can be found here 
Post a Comment

Popular posts from this blog

S&P Rating, tea parties and the mad hatter.

This past week the S&P downgraded the USA credit rating from AAA to AA, this now puts us on the same footing as Spain.  All in all it appears to me as part of generalized push to decapitalize and delegitimize government in general. To force the out sourcing of the key infrastructure projects to private corporate entities, much like is done in places like Nigeria, and Colombia. Whether it's the "Tea party" or not, sharks are in the water and instead of tossing our buckets overboard to lighten the load, we need to gather all hands and use them to bail ourselves out.

We all benefit when government is involved in maintaining things like access to water, electricity, roads, and basic health care. The History of this great nation is filled with examples of government subsidies going to private industry to create wealth. To think that private corporations, or even individuals have produced this wealth _ex nihilo_ with only their sweat is hubris. It is to forget that we all…