diff --git a/app/blog/routing.md b/app/blog/routing.md index ab116c517d..882428a6a9 100644 --- a/app/blog/routing.md +++ b/app/blog/routing.md @@ -12,10 +12,8 @@ title: "Encapsulated Routing with Elements" } - ## Introduction - Polymer is designed with a set of principles in mind: **encapsulation**, **composition**, and **separation of concerns**. When we set out to tackle routing, we knew we wanted to do it in a way that adheres to these principles. Most client side routers are monolithic black boxes that require a complete and centralized route configuration with perfect knowledge of every routable location in the app. It’s also common for routing to be conflated with other concerns, like loading data or transitioning between views. @@ -56,15 +54,14 @@ Note also, how little actual routing there is here. Almost all of the work is be You can see the core of the idea here, but we’ve jumped ahead a bit. I mean, where does the route in `route="{{route}}"` come from? What’s that `pattern` property doing, and how is it related to `data`? - -## <app-route> +## app-route Let’s walk back a bit and consider the routing problem, one piece at a time, beginning with just a ``. What does it do, and how does it work? `` simply matches an input path against a specified pattern. Here's a simple demo of a standalone ``. Instead of being hooked up to the page URL, it's hooked up to inputs, so you can change the path and pattern by hand. - -Open demo in new window + +Open demo in new window `` deals with hierarchical, slash separated paths. You give it a pattern, and it tells you when the input matches. @@ -72,12 +69,12 @@ If the pattern contains any variables, like `/:tabName` then the `` e We're still iterating on the syntax of `pattern`. The most surprising thing to notice is that `/foo` will match `/foo`, `/foo/`, and `/foo/bar/baz`. The pattern `/foo/` with a trailing slash however will only match `/foo/`. -## <app-location> +## app-location `` doesn't know about the URL, it just knows about paths. While you’ll have many `` elements in your app, there’s only one URL bar. The URL is global. So we’ve got an element whose single responsibility is connecting the URL to your app. We call this element ``, and it exposes a `route` property suitable for binding into a ``, like so: - -Open demo in new window + +Open demo in new window Notice however that if you open the demo in its own window and change the path, refreshing will give you a 404. That's because the server doesn't know what @@ -99,9 +96,8 @@ Ok, so that’s how to get a `` hooked up to the URL. However, the be `` exposes a property named `tail` that can be passed in as the the `route` of another ``. The `tail` represents the rest of the path that comes after the part that `pattern` matches. When the `tail` route changes, those changes propagate up, so the bidirectional data binding is still working its magic. - -Open demo in new window - + +Open demo in new window ### Why chain routes?