This is a migrated thread and some comments may be shown as answers.

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

2 Answers 95 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Yohann
Top achievements
Rank 1
Yohann asked on 12 Feb 2014, 11:18 PM
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



















2 Answers, 1 is accepted

Sort by
0
Yohann
Top achievements
Rank 1
answered on 12 Feb 2014, 11:21 PM
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..
0
Accepted
Alexander Valchev
Telerik team
answered on 14 Feb 2014, 09:50 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ScrollView (Mobile)
Asked by
Yohann
Top achievements
Rank 1
Answers by
Yohann
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or