How to deal with conditional js statement in a kendo UI template generated from a show event ?

[Yohann]

Hello,

I have an asynchrone function that generate a scrollView depending on the data I'm pulling from the server, I want to be able to display different buttons in the Scroll View.

So I am using an if statement in the scrollView template like so:


<div data-role="view" data-layout="overview-layout" data-show="showEvent" data-title="Meet My Friends" id="event">
            <div data-role="content" class="content">

                <div id="eventContent"></div>

                <div>
                    <div id="friendsToInvite" data-role="scrollview" data-source="friendsToInvite" data-template="friendsToInvite-template" data-enable-pager="false"></div>
                </div>
            </div>
        </div>


<script id="friendsToInvite-template" type="text/x-kendo-template">
            <p class="friendName">#= name #</p>
            <div style="width: auto; height: 180px; background: url('https://graph.facebook.com/#= fbId #/picture?type=large')  no-repeat center;"></div>

            #if( invited ) {#
                <p class="friendsButtons"><button class="button2 btn-green" onclick="uninviteFriend(this, #= fbId #, #= eventId #)">Already Invited : Un-invite</button></p>
            #} else {#
                <p class="friendsButtons"><button class="button2 btn-orange" onclick="inviteFriend(this, #= fbId #, #= eventId #)">Invite</button><button class="button2 btn-grey">Dont show me again</button></p>
            #}#
        </script>

And in my show function at some point I have

$.when( Event.getFriendsList( event.id ) ).done( function( friendsList )
    {
        console.log("when");
        if ( friendsList.length > 0 )
        {
            var friendsToInvite = [];

            for ( var i = 0; i < friendsList.length; i++ )
            {
                friendsToInvite.push( { name: friendsList[i]["name"], fbId: friendsList[i]["fbid"], invited: friendsList[i]["invited"], eventId: event.id } );
            };
            console.log( friendsToInvite );
            $( "#friendsToInvite" ).data( "kendoMobileScrollView" ).setDataSource( friendsToInvite );
        }
        else
        {
            console.log("Got to be creative here ...")
        }
    });

My problem is that I have a js error in my console saying that "Uncaught ReferenceError: invited is not defined " This is coming from the if statement.
How can I fix this ? In the doc, it seems that when having if statements in your kendo ui, you need to generate it at the init of the page.

Thanks

[Yohann]

If I try to declare a global invite variable (which I would like to avoid), then what's in the if statement is never displayed, wether invited is true or false..

[Alexander Valchev]

Hello Yohann,

Generally speaking the global variable should not be needed.
My recommendation is to set the autoBind option of the widget to false. In this way the data should not be bound at the init event and respectively the template will not be executed. 

Please test the suggested solution and let me know if it fits in your requirements.

Regards,
Alexander Valchev
Telerik