Commented out HTML data-bind references are evaluated at runtime

3 posts, 1 answers
  1. John
    John avatar
    17 posts
    Member since:
    Jul 2010

    Posted 20 Aug 2013 Link to this post

    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>
  2. Answer
    Deyan Varchev
    Admin
    Deyan Varchev avatar
    150 posts

    Posted 23 Aug 2013 Link to this post

    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.
  3. John
    John avatar
    17 posts
    Member since:
    Jul 2010

    Posted 23 Aug 2013 Link to this post

    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
Back to Top