{{ value: xxx }} substitution not working

I’m migrating ViewModels and Views from 2.0 to 4.0 and having trouble getting a page to properly substitute {{value: xxx}} with the value of xxx that’s clearly visible in the hidden __dot_viewmodel_root object pushed down to the client.

All of the back-end code is running and the page is displaying the static content from the .dothtml page and our master view. There are no errors or exceptions noted in the browser console or in our server-side logs.

ALL instances where we’re referring to ViewModel variables via the {{view: xxx}} syntax are rendering as blank / empty. I’ve tried several other ways of solving this (e.g., dot:Literal and dot:HTMLLiteral) and they’re all exhibiting the same behavior.

View Model

public string copyrightYear { get; set; }

DotHTML

Copyright Year: {{value: copyrightYear}}

HTML Source from browser

Copyright Year:

Notice that the knockout is simply blank even though the client-side viewModel looks like this:

<input type=“hidden” id=“__dot_viewmodel_root” value=“{“viewModel”:{”$type":“a0iBt1Zo4E1q919L”,“bAreYouSure”:false,“copyrightYear”:“2024”, [[more here redacted … it checks out as clean JSON, though]] }}">

I’ve created a significantly simplified version of this ViewModel that only contains a few variables and a custom class. Using the same dothtml as above, it’s working properly and putting the “2024” onto the page.

Are there any known issues that would cause the view model data to not be substituted properly without throwing ANY client-side or server-side errors?

Can you try to look at page source (not through Dev Tools, but right click the page and select View Source or something like that).
Can you find the part with {{value: copyrightYear}} and post what has been rendered?
Then, you can try to evaluate dotvvm.state.copyrightYear in the Dev Tools console to see whether DotVVM was successfully loaded and succeeded in loading the ViewModel.

I have not seen behavior like this - I suspect some other library may conflict with DotVVM, but it is strange we do not see any errors in the log.

(Sorry about that earlier reply … I’d inadvertently looked at the pruned down ViewModel that is working.)

Looking through page source (not dev tools) and we see:

Copyright Year: <!-- ko text: copyrightYear –><!-- /ko –>
(I had to add _ in the above to get it to render properly in this editor.)

In the console, when I try to evaluate dotvvm.state.copyrightYear it’s giving me the following error:

Uncaught Error: DotVVM is not initialized. at N (https://[[my_host_name]]/dotvvmResource/JQWcnj2o7fWhL7fJpioy/dotvvm–internal:2:17510) at O (https://[[my_host_name]]/dotvvmResource/JQWcnj2o7fWhL7fJpioy/dotvvm–internal:2:17915) at K (https://[[my_host_name]]/dotvvmResource/JQWcnj2o7fWhL7fJpioy/dotvvm–internal:2:17785) at get state (https://[[my_host_name]]/dotvvmResource/JQWcnj2o7fWhL7fJpioy/dotvvm–internal:2:59358) at :1:8

Is there any way to increase the client-side logging level for the DotVVM components to see what may be going on?

We’ve added RayGun for javascript error logging and debugging and now we’re seeing this previously uncaught javascript item:

dotvvm–internal:2

Uncaught

D {
“message”: “Cannot coerce ‘2018-03-31 12:22:52’ to type ‘DateTime’.”,
“path”: “removalStatistics/keeperSplendaTenant/createdAt”,
“isError”: true,
“wasCoerced”: false
}
Qe @ dotvvm–internal:2
Z @ dotvvm–internal:2
qn @ dotvvm–internal:2
Ni @ dotvvm–internal:2
(anonymous) @ data:text/javascript…0KCJlbi1VUyIpOw==:1

Found the root cause of the issue …

We had a custom JSON Converter on two DateTime fields that was causing them to be serialized as “yyyy-MM-dd HH:mm:ss” rather than whatever the default formatting is.

It appears that the view model serializer didn’t have a problem with this but the javascript bits further down in the stack did.

We were able to remove the custom JSON Converter without impacting much other code on our end so we’re going that route.

This worked fine on DotVVM 2.x

Oh, apologies for the delay - I am glad you found the cause of the issue.
DotVVM uses its own converter for DateTime to prevent unwanted UTC/local date issues.

Prior to DotVVM 3, the viewmodel was not validated on the client, so the date produced by the custom serializer probably got to the viewmodel. Still, it was different than DotVVM expected, so it might have caused some issues later, but it did not prevent the page from being loaded.

Thanks for reporting this - we should produce a better error message in the JS console.

The fix for the error message: JS: make CoerceError inherit Error, fixing console log by exyi · Pull Request #1832 · riganti/dotvvm · GitHub

1 Like