Commented out html with data-bind attributes are evaluated at runtime

[John]

I have just spent a few hours debugging some kendodatasources, but have now narrowed it down to a bug in kendo mvvm bindings (I think).

For example in the html below I have data-bind="source:viewModel.orderSource", where orderSource is a kendodatasource object in the viewModel.

Notice in the commented out html I just reference client name on the main entity with #: ClientName#.

Well I then added a Client entity to the data model and made that a reference on the main Order entity.

But, everytime I ran the code I was getting "Uncaught ReferenceError: ClientName is not defined".

After trying lots of things (thinking it was my odata source or kendodatasource definition) that was causing the problem I change ClientName in the commented out section to Client.ClientName in an act of desperation!

Voila!  The error was fixed.

So the issue must be that the MVVM bindings somehow don't recognise that the "#: " is within a comment and tries to bind it.

Is that a bug or is that somehow strangely by design?

What made it all the more difficult is that the error occurred at the datasource.read(), and didn't mention anything about the binding level being the issue.

***Just realised I should have probably posted this on the Kendo forums, but may as well leave here in case anyone hits the same issue.****

<div>
<ul data-role="listview" data-auto-bind="false" data-style="inset" data-bind="source:viewModel.orderSource,events:{click:selectorder}" data-template="ordersTemplate">

            </ul> 
        </div>

        <script id="ordersTemplate" type="text/x-kendo-template">
            <a href="\#side-order?orderID=#: EnquiryId #" >
               <!-- <span data-bind="style: {
        backgroundColor: Status.StatusColor}" class="statusBadge">#: Status.StatusName# </span><span style="font-size:11px">#: ClientName# #: MainAddress1# #: MainPostcode#</span>-->
             <span ></span><span data-bind="attr: { class: Status.StatusCssClass}" style="font-size:11px">#: Client.ClientName# #: Client.ClientAddress# #: Client.ClientPostcode# (#:Status.StatusName#)</span>
                
            </a> 
        </script>

[Alexander Valchev]

Hi Johno,

Your observation is correct - template expressions are evaluated no matter if they are placed inside a HTML commented line. This is because they are executed while the template renders, not after the HTML is appended to the DOM tree.

Regards,
Alexander Valchev
Telerik

[John]

Hi Alexander 

Thanks for the clarification, it's certainly worth making that point out-loud in the documentation.  Took me ages to figure out what was going wrong!

Surely there is a way you could *not* evaluate them though; I can see some people getting very mixed up (like I did)?

Cheers

John

[Petur Subev]

Hello John,

I posted a replay in the support ticket that you opened. The documentation will be updated as-well.

Kind Regards,
Petur Subev
Telerik