MVVM bind not working with span/html since 2023.1.117

[Jay]

Ran into a bug with the latest version, traced it back to the first release of the year, 2023.1.117.

This dojo works, using 2022.3.1109.

This dojo does not work, using 2023.1.117 or later.

The not working example displays "undefined" whereas the working one displays "$100".

[Nikolay]

Hi Jay,

I already answered to your this question in the private thread you have submitted but I will post the reply here as well so others can benefit from it.

The change in behavior is due to the CSP updates that we introduced in the Kendo UI R1 2023 release. 

However, the usage of bindings in this manner has never been supported, this is mentioned in the important section of the overview documentation:

https://docs.telerik.com/kendo-ui/framework/mvvm/overview#important-notes

Bindings are not JavaScript code. Although bindings look like JavaScript code, they are not. The <div data-bind="text: person.name.toLowerCase()"></div> chunk of code is not a valid Kendo UI MVVM binding declaration. If a value from the View-Model requires processing before displaying it in the View, a method should be created and used instead.

The reason this approach would've worked in the old version is because of how the new Function/eval methods operate. Part of the reason they are considered to be a security risk is because of behaviors like this one. Using the binding itself to call a function should never be possible.

The correct approach is the following:

<div id="debtDiv">
  <span id="DebtSpan" data-bind="html: DebtDisplay"></span>
</div>
<script type="text/javascript">
function debtDisplay(dataName) {
    var debt = obs.get("Debt");
    return kendo.format("{0:c0}", debt);
  }

var obs = kendo.observable({
    Debt: 100,
    DebtDisplay: function(dataName) {
      return debtDisplay(dataName);
    }
  });
</script>

Dojo demo: https://dojo.telerik.com/aQiyobEV

Regards,
Nikolay
Progress Telerik

[Jay]

Nikolay, thanks for the explanation. Looks like I have some code to review.

[Ashot]

Hi Nikolay, I used the code in documentation, which is worked https://docs.telerik.com/kendo-ui/knowledge-base/mvvm-pass-parameters-from-view-to-view-model-function, but after this update, it's not working anymore, and there is no way to pass param, to the observable function. Even in your example DebtDisplay have parameter dataName, which is undefined. Is there a way to pass a parameter to onservable function from html? 

[Nikolay]

Hi Ashot,

I have updated the Dojo to work with the Kendo UI versions after the CSP updates. Please find it at the link below:

https://dojo.telerik.com/UZuSiWAq

I will also update the article to reflect these changes.

Regards,

Nikolay

[Daniel Knoll]

The article still shows how to use the parameter in a function. 

So you are saying it is not possible anymore to pass a parameter? Is there any way around it?

I'm upgrading from a kendo version from 2021 and our application is not showing any template data because we excessively used the parameter in model functions for dynamic data.

[Nikolay]

Hi Daniel,

Everything I mentioned above is valid and these changes are due to the CSP updates we introduced in the Kendo UI R1 2023 release.

That said, I will update the article to reflect the changes and to avoid future confusion.

Regards,

Nikolay