Commented out HTML data-bind references are evaluated at runtime

[John]

I have just spent a few hours debugging some kendodatasources, but have no 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>

[Deyan Varchev]

Hello John,

It seems that you posted this as a question to the kendo UI support as well. For the sake of convenience for others reading this post I'm reposting the answer:

All the html inside of the template is being evaluated - after all it becomes string. ($('#templateId').html() is used) and these comments are also taken into account. Simply do not add such commented expressions (because they still work) and no exceptions will appear.

Regards,
Deyan Varchev
Telerik

Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[John]

Yes I did Deyan, and thanks for reposting the answer.  I'm sure many people will hit the same issue as they are prototyping/testing things out.

Regards

John