Polymer - How to pass parameter to cuba-service component?

I have the following:

   <cuba-service id="data"

The service has one parameter named eventID. How can I pass a value say “e123” for this parameter via the URL and into the cuba-service component?

Hi, use params property of the cuba-service element. If parameters are static you can specify them directly in attribute:

<cuba-service ...

Otherwise use data-binding


Also see the following sample project: https://github.com/cuba-labs/polymer-data-samples

My parameter is dynamic so I used the data-binding approach as follows:

I’m passing parameter from the previous page via the URL like #/my-component-data/e123. I’m using standard JavaScript to extract the eventID from the URL as follows:

    queryParams: {
      type: Object,
       value: function() {
        var l = new URL(document.location);
        var path = l.hash //path from the # char
        var eventID = path.split("/").pop();
        return {"eventID": eventID};

a) The problem I’m having is that the data is not being refresh when I move between different eventID values. Only when I re-load the whole page that’s when it get refreshed. I tried using the script code below but it still not working.

  observers: [
  _routeChanged: function(changeRecord) {
    if (changeRecord.path === '/my-component-data') {

b) another related issue is that I noticed that in the section the variable {{route.path}} has value ‘/e123’. but I can’t seem to be able to access this variable in the section. I tried following code to assign to ‘queryParams’ property but it did work.

    queryParams: {
      type: Object,
       value: function() {
        return {"eventID": route.path};

I have resolved my two issues above.
a) Instead of setting default value for queryParams I used ‘_computed’ key to define a function to compute the value.
b) I didn’t have a goo understanding of routes. I read the following articles

1 Like