Checkboxgroup issue when used with View Model

[BrentH-Alnico]

Hi Boris,

I am converting plain objects/arrays project to use View Models.

When using plain objects/arrays I have no problems with checkboxgroup in this scenario.

When using View Models I am getting error: data.MayInviteOthers_list is not a function.

Here's a stripped down jsfiddle for testing.
https://jsfiddle.net/alnico/57Ldgs8e/

To test:

1. On page load, no error.
2. toggle radio to 'Normal', no error.
3. toggle radio to 'Edit', error: not a function.
4. Reload page, switch back and forth on tabs, no error interestingly... {{if...}} tag mounts/unmounts data...why no error here.
5. If you use inline data-link="{checkboxgroup ~People.MayInviteOthers_list()}", no errors in any scenario.

{^{checkboxgroup MayInviteOthers_list() ".MayInviteOthers_list"}} 
   {^{for PeopleList() ~People=#data}} 
      {^{if ~root.IsEditing()}}

         {{!-- error --}}
         <label class="checkbox pb-2">
            <input class="MayInviteOthers_list" type="checkbox" value="{{:GUID()}}" /> 
            May Invite Others
         </label>

         {{!-- no error
            <label class="checkbox pb-2">
               <input type="checkbox" value="{{:GUID()}}" data-link="{checkboxgroup ~People.MayInviteOthers_list()}" /> 
               May Invite Others
            </label>
         --}}
         
      {{/if}} 
   {{/for}} 
{{/checkboxgroup}}

[BorisMoore]

Thanks Brent, for reporting this issue, and the other related ones. I hope to investigate further, though it might take a little whiile...

[BorisMoore]

Hi Brent - here is a candidate fix for issues 463 464 465 and 466.
Can you test it in your environment?

jsviews16 Candidate A.js.txt

You should no longer get the "data.MayInviteOthers_list is not a function" error

[BrentH-Alnico]

This fix works.
It also fixes an issue where I resorted to using visible{...} a month ago, not really knowing if it was a real 'issue' or a context issue on my side.
Awesome, thanks!

[BrentH-Alnico]

Hi Boris,

Although candidate v16 fixed the issue reported above, I have another checkboxgroup that worked once upon a time but no longer (was buried, so I didn't notice it).

Using v15, I get error data.propName is not a function.
Using candidate v16, I get error Cannot read properties of undefined (reading 'base')

Note: this issue seems different than the one reported above...
I have a control that conditionally displays a {{block}}, but it is when I click on the input...checkbox bound to checkboxgroup that I get the error Cannot read properties of undefined (reading 'base').

I did some snooping to see if candidate v16 had an update that may have broken something (also testing my hacking skills ;-)...
I couldn't find anything (not surprising to me because this is over my head ;-), but I used Claude to assist and tried the following block of code...To my surprise it worked!
However, I do not know if this is an appropriate fix.

New code

function getDerivedMethod(baseMethod, method) {
   return function () {
      var ret,
         tag = this,
         prevBase = (tag && tag.base) || null;

      if (tag) {
         tag.base = baseMethod; // Within method call, calling this.base will call the base method
         ret = method.apply(tag, arguments); // Call the method
         tag.base = prevBase; // Replace this.base to be the base method of the previous call
      } else {
         // Fallback if tag is undefined - call method directly
         ret = method.apply(this, arguments);
      }
      return ret;
   };
}

Old code

function getDerivedMethod(baseMethod, method) {
   return function () {
      var ret,
         tag = this,
         prevBase = tag.base;

      tag.base = baseMethod; // Within method call, calling this.base will call the base method
      ret = method.apply(tag, arguments); // Call the method
      tag.base = prevBase; // Replace this.base to be the base method of the previous call, for chained calls
      return ret;
   };
}

If you need to see my code I can get it to you...

Thanks,
Brent

[BorisMoore]

Thanks Brent.
Any chance of a small repro, to show the context in which this error is coming up? Yes - maybe a small piece of your code. ;-)

[BrentH-Alnico]

Hi Boris,

I sent you test file testCanidate16A_forBoris.html...sorry, no small file.

HTML line in question: 669 dateTime_voteOfficial

Using Candidate v16A

1. Click checkbox Finalize Event.
2. Click checkbox 4 PM...TypeError: Cannot read properties of undefined (reading 'base')

1. If checkbox Finalize Event is initially checked, line: 2073 StopVoting: 1
2. Click checkbox 4 PM...works as expected (This scenario also works with v15)

Using v15

1. Click checkbox Finalize Event...TypeError: data.makeVotesOffical is not a function

[BrentH-Alnico]

Good morning Boris,

I am finalizing my code and doing cleanup, etc...

Using v15
TypeError: data.makeVotesOffical is not a function (issue fixed in Candidate v16A)

Using Candidate v16A
TypeError: Cannot read properties of undefined (reading 'base')

I figured out this this issue: sloppy coding on my part; I was using an improperly defined helper for convertBack...

{^{checkboxgroup makeVotesOffical() '.dateTime_voteOfficial' convertBack=~stringToInt}} instead of convertBack=~stringToInt(makeVotesOffical())
AND I had a helper and converter with the same name doing similar things but not completely correct, ugh!

Because checkboxgroup value is always an array of "strings" , I was doing conversion for use elsewhere...
This involved ~inArray() helper that used strict comparison ===...return array.includes(item);...item is integer.
I am now using a less strict comparison ==...return array.some(element => element == item);
And by using a less strict comparison, I don't even need convertBack on the checkboxgroup at all...removed ;-)

In summary, there were 2 coding issues on my part.

However, in testing the different scenarios previously posted, I don't know why things worked in one scenario and not the other.

Also, I don't know if there could have been a better error thrown than TypeError: Cannot read properties of undefined (reading 'base') that would have helped target the issue...maybe to broad?

Apologies for sending you down a rabbit hole.
Brent

PS. Issue #464 also involves checkboxgroup and ~inArray()...I am going to look at this more deeply today.

[BorisMoore]

In fact I am working on an update (Candidate 16C) with a few fixes, including for this issue.

16C fixes this error even with your previous convertBack and inArray code. So there was indeed a problem in my code, independently from any possible code issues in your code :-)

I hope to get you this update before long.

I think the only remaining one I am working on is #464 extra parens, and not updating...

[BorisMoore]

I think it is #465 - the other one with checkboxgroup. I have fixes for that already, including linkTo... Just wait until I have the candidate 16B available, so you can test.

[BrentH-Alnico]

Interesting.
Thanks Boris, no rush...I have plenty to do ;-)

[BorisMoore]

Hi Brent, here is a jsviews.js candidate fix for issues 463 464 465 and 466. Can you test it in your environment?

Thanks!

jsviews16 Candidate B.js.txt

[BrentH-Alnico]

Hi Boris, thanks for the update!

Testing with V16B, it looks all issues addressed were fixed...

However, a new issue has been introduced with V16B...

To test:

1. Click Edit radio button
2. Click People tab
3. Click hamburger button
4. Click Suggest alt date/time checkbox, line 1727
5. TypeError: Cannot set properties of undefined (setting '_cId') (this issue appears with those 4 checkbox's...they use same logic)

---

A couple days ago I added a block of code (deeply nested) that isn't refreshing on 2nd + checkbox toggles...
I didn't know if your updates would address it, looks like it didn't...however, Using v15 it works correctly.

When checkbox is checked if responds correctly, but then when unchecked or checked again if fails to refresh.
Interestingly enough, in my app I use many checkbox's like this, outside of the checkboxgroup, that aren't failing.
And I use both value="1" or none with {^{if ...}} without refreshing issues...not sure what makes this case unique.

To test:

1. Click People tab
2. Click Person 2 image icon, modal will open
3. Click Remove Person checkbox, button below toggles from Send to Remove
4. Click Remove Person checkbox again, now button no longer toggles.
5. Note: if I use {^{if ~itemPeopleList.removePersonAttending_confirm() == 1}} then it works.

line 1364
<input type="checkbox" value="1" data-link="~itemPeopleList.removePersonAttending_confirm()">

{^{if ~itemPeopleList.removePersonAttending_confirm()}}
  Remove
{{else}}
  Send
{{/if}}

I sent you a slightly modified test file: testCanidate16B_forBoris.html

Thanks,
Brent

[BorisMoore]

Thanks Brent - this if very helpful. Your bug testing feedback is invaluable!

[BorisMoore]

Hi Brent,
I struggled with resolving this one:

1. Click Edit radio button
2. Click People tab
3. Click hamburger button
4. Click Suggest alt date/time checkbox, line 1727
5. TypeError: Cannot set properties of undefined (setting '_cId') (this issue appears with those 4 checkbox's...they use same logic)

But I think I have a fix for this and also the other issues we have been tracking.

Can you test it in your environment?

jsviews16 Candidate C.js.txt

Thanks!

[BrentH-Alnico]

Hi Boris,

This and other related fixes are working with jsviews16 Candidate C.
I tested my app, another project using plain objects/arrays and another using VM's...no issues found.

Thanks for the fixes, much appreciated...sorry this was a difficult one ;-)