`urlFor` not defined

[jshohel]

I am trying to use more-routing in our app. I am getting this error message -

[dom-bind::_annotatedComputationEffect]: compute method urlFor not defined

Is this a bug or I am missing something?

1st level rouging works though, but 2nd level (i mean nested routing) rouging is not working.

[Pickachu]

:+1:

[oathcomrade]

Same problem here.

[dlmiyamoto]

I think the problem arises from the fact that Polymer 1.0 no longer allows for expressions in bindings. In theory, you should still be able to use it if you add a computed binding and have it return MoreRouting.urlFor(route).

[barnomics]

:+1:

[nevir]

Also take a look at MoreRouting.TemplateHelpers, which you can mix into your elements

On Mon, Jun 29, 2015, 11:07 Bar notifications@github.com wrote:

[image: :+1:]

— Reply to this email directly or view it on GitHub https://github.com/PolymerLabs/more-routing/issues/44#issuecomment-116779714 .

[robdodson]

@nevir Would I mix those into the behaviors array like this?

Polymer({
  is: 'my-app',
  behaviors: [MoreRouting.TemplateHelpers]
});

[kenneth-g-flux]

Figured it out via some trial and error. @nevir Mixin in the behavior like @robdodson suggests only works for paths without parameters. My best guess is that urlFor('route-name',{param:value}) is too "complex" to be used.

Adding a computed binding seems to be working in custom components:

<link rel="import" href="../bower_components/more-routing/more-route-template-helpers.html">
<dom-module id="person-url">
    <template>
        <a href="{{computeUrl(name)}}">{{name}}</a>
    </template>
    <script>
        Polymer({
            is: 'person-url',
            properties: {
                name: {
                    type: String,
                    value: ''
                }
            },
            computeUrl: function(name) {
                return MoreRouting.urlFor('person-read',{id:name});
            }
        });
    </script>
</dom-module>

Note that this makes mixin in the behavior obsolete.

For completeness, my routes.html file:

<link rel="import" href="bower_components/more-routing/more-routing.html">

<more-routing-config driver="hash"></more-routing-config>

<more-route name="home" path="/"></more-route>
<more-route name="person-list" path="/people">
    <more-route name="person-read" path="/:id"></more-route>
</more-route>

I however couldn't get that to work in my index.html file without custom component. I don't know why that is.

[barnomics]

You can pass parameters to your helper computed function, you just have to be very specific with the formatting -

<a href='{{_computerUrl("users", "{"name":"joe"}")}}'>Joe Link</a>

then...

computeUrl: function(path, params) {
    var params = params ? JSON.parse(params) : {};
   return MoreRouting.urlFor(path, params);
}

Notice the single quote on the attribute - you want to be able to use double quotes for the object so its parsed correctly when passed into the function

[kenneth-g-flux]

Could you check your formatting of the object? The amount of double quotes in "{"name":"joe"}" seems pretty weird to me and doesn't work. JavaScript won't recognize that as an object.

[barnomics]

Sorry I forgot the JSON.parse part- I updated the function

computeUrl: function(path, params) {
    var params = params ? JSON.parse(params) : {};
   return MoreRouting.urlFor(path, params);
}

[craftgear]

This is weird. When I pass an option argument, urlFor isn't even invoked.

Maybe this is caused by Polymer itself?

I really would like to know what is happening here. Does anyone have any clues?

[craftgear]

O.K. I got this. Polymer simply doesn't accept JSON inside bindings.

The parameters issue doesn't have anything to do with MoreRouting. Readme.md is kinda misleading though.

[popbee]

Sorry to rant about Polymer in general in this topic, but just to point out another example where Polymer 1.0's lack of 'complex' expressions hurts (IMHO).

Link to rant on the topic: https://github.com/Polymer/polymer/issues/1847#issuecomment-125014795