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

Support
#1

I have the following:


   <cuba-service id="data"
                service-name="myapp_Service1"
                method="getRecByEvent"
                data="{{entities}}"
                loading="{{dataLoading}}"
                auto="[[active]]"
                handle-as="json">
    </cuba-service>

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?

#2

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


<cuba-service ...
              params='{"eventId":"e123"}'>
</cuba-service>

Otherwise use data-binding


 params="[[serviceParams]]"

Also see the following sample project: GitHub - cuba-labs/polymer-data-samples

#3

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(route.*)'
  ],
  _routeChanged: function(changeRecord) {
    if (changeRecord.path === '/my-component-data') {
      this.$.data.load();
      this.$.header.load();
    }
  }

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};
      }
#4

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
https://www.polymer-project.org/blog/routing
https://www.polymer-project.org/2.0/toolbox/routing

1 Like