How to call a function in data-binding when lots of parameters are involved

[Tony Mobily]

At the moment I have this in my template:

* **WAY 1**

              <template is="dom-if" if="{{_showCancel(userData.generic.id,info.userId,info._children.gigId.userId,info.accepted,info.cancelled,info.paymentTerms)}}">

And then this in my element:

      _showCancel: function(viewerUserId,offerUserId,gigUserId, accepted, cancel, paymentTerms) {

        // Offer needs to be accepted and NOT cancelled

        if (!info.accepted || info.cancelled) return false;

        // Gig owner can ALWAYS cancel an offer

        if (viewerUserId == gigUserId ) return true;

        // Offer maker can only cancel if the gig involved pre-payment

        if (viewerUserId == offerUserId && paymentTerms != 'on-day') return true;

        return false;

      },

Do I have just too many parameters to this function?

* **WAY 2**

Should I just have something like this instead:

    <template is="dom-if" if="{{_showCancel(userData, info)}}">

* **WAY 3**

Although I would want to check if their sub-properties change too... so I would need:

    <template is="dom-if" if="{{_showCancel(userData, info, userData.*, info.*)}}">

* **WAY 4**

But then again I probably should just look for the properties and use the `value` property like so:

    <template is="dom-if" if="{{_showCancel(userData.*, info.*)}}">

And then the function would be:

    _showCancel: function(userDataObs, infoObs) {

      var userData = userDataObs.value;

      var info = infoObs.value;

      if( !userData || !info) return;

      ...

    

Questions:

* Do you see any fundamental mistakes with ways 1 to 4?

* Is WAY 1 really the best way to go about it? (it feels like it right now)

* Is WAY 3 an acceptable pattern?