MVVM bind not working with span/html since 2023.1.117

1 Answer 79 Views
MVVM
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Jay asked on 19 Oct 2023, 05:04 PM

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".

1 Answer, 1 is accepted

Sort by
0
Accepted
Nikolay
Telerik team
answered on 24 Oct 2023, 10:25 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 24 Oct 2023, 11:36 AM

Nikolay, thanks for the explanation. Looks like I have some code to review.
Ashot
Top achievements
Rank 1
commented on 19 Nov 2023, 07:35 PM

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
Telerik team
commented on 23 Nov 2023, 06:10 AM

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
Top achievements
Rank 1
commented on 03 Apr 2024, 02:56 PM

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
Telerik team
commented on 08 Apr 2024, 10:56 AM

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

Tags
MVVM
Asked by
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Nikolay
Telerik team
Share this question
or