Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Using a delimiter for multiple bindings #6

Open
jshortall opened this issue Nov 11, 2014 · 1 comment
Open

Using a delimiter for multiple bindings #6

jshortall opened this issue Nov 11, 2014 · 1 comment

Comments

@jshortall
Copy link

Flatiron is great and even better with Polymer!

Can anyone think of a way we can add the ability to use the delimiter option on the router and bind multiple properties?

I was thinking of adding an options attribute to pass in things like {"strict":false, "delimiter":"-"}, but there is still the matter of binding to router.on() for multiple objects.

I don't understand the use of regexes with flatiron well enough yet.

@jshortall
Copy link
Author

I wasn't able to handle multiple routes in a simple routes object without a lot of external watching, so for now I have this hack that is working for me. Up to five routes available for binding.

<link rel="import" href="/bower_components/polymer/polymer.html">
<script src="/bower_components/flatiron-director/director/director.min.js"></script>

<polymer-element name="flatiron-multi-director" attributes="route1 route2 route3 route4 route5 autoHash" hidden>
  <script>
    (function() {
      var private_router;
      Polymer('flatiron-multi-director', {
        autoHash: false,
        observe : {
          route1:'routeChanged',
          route2:'routeChanged',
          route3:'routeChanged',
          route4:'routeChanged',
          route5:'routeChanged'
        },
        ready: function() {
          this.router.on(/(.*)/, function(route) {
            this.route = route;
          }.bind(this));
          if (this.router.getRoute()) {
            var route = this.router.getRoute();
            for (var i=0; i < route.length; i++) {
              if (i < 5) {
                this['route' + (i + 1)] = route[i];
              }
            }
          }
        },
        routeChanged: function() {
          if (this.autoHash) {
            window.location.hash = (this.route1 || '') + this.router.delimiter + (this.route2 || '') + this.router.delimiter + (this.route3 || '') + this.router.delimiter + 
                (this.route4 || '') + this.router.delimiter + (this.route5 || '');
          }
          this.fire('director-route', this.route);
        },
        get router() {
          if (!private_router) {
            private_router = new Router();
            private_router.init();
          }
          return private_router;
        }
      });
    })();
  </script>
</polymer-element>

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant