How to control the order of my javascript logic in my display template?

Question

I have created a custom item display template. In this custom item display template I try to check if the current user has contribute permissions to the item. The item is an sitecollection. If the current user has contribute permissions I would like to add an red border on the item. Otherwise a blue border. This is my current code:

<div id="Item_PictureOnTop">
        <!--#_
        var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_pictureOnTop_");

        var linkURL = $getItemValue(ctx, "Link URL");
        linkURL.overrideValueRenderer($urlHtmlEncode);

        var line1 = $getItemValue(ctx, "Line 1");
        var setLineHeightRenderer = function(valueInfoObj)
        {
        if(!$isNull(valueInfoObj) && !valueInfoObj.isEmpty)
        {
        if(!$isNull(valueInfoObj.defaultValueRenderer))
        {
        return valueInfoObj.defaultValueRenderer(valueInfoObj);
        }
        else
        {
        return valueInfoObj.toString();
        }
        }
        else
        {
        return "&nbsp;";
        }
        }
        var line2 = $getItemValue(ctx, "Line 2");
        line2.overrideValueRenderer(setLineHeightRenderer);
        var line3 = $getItemValue(ctx, "Line 3");
        line3.overrideValueRenderer(setLineHeightRenderer);

        var containerId = encodedId + "container";
        var pictureLinkId = encodedId + "pictureLink";
        var pictureContainerId = encodedId + "pictureContainer";
        var dataContainerId = encodedId + "dataContainer";
        var line1LinkId = encodedId + "line1Link";
        var line1Id = encodedId + "line1";
        var line2Id = encodedId + "line2";
        var line3Id = encodedId + "line3";

        var noPictureFoundImgUrl = "/_layouts/15/BrabantWater.Intranet.Functions.Landingspagina/logo.png"

        var imageUrl = null;
        var appendingCssStyle = "";

        if ($isEmptyString(ctx.CurrentItem.SiteLogo))
        {
        imageUrl = noPictureFoundImgUrl;
        }
        else
        {
        imageUrl = ctx.CurrentItem.SiteLogo;
        }

        function CheckPermission(url) {
        var isContributor = false;
        var clientContext = new SP.ClientContext(url);
        var currentSite = clientContext.get_web();
        clientContext.load(currentSite);
        clientContext.executeQueryAsync(function(){
        var basePerm = new SP.BasePermissions();
        basePerm.set(SP.PermissionKind.viewListItems);
        basePerm.set(SP.PermissionKind.addListItems);
        basePerm.set(SP.PermissionKind.editListItems);
        basePerm.set(SP.PermissionKind.deleteListItems);
        isContributor = currentSite.doesUserHavePermissions(basePerm);
        if(isContributor)
        {
            //user has contribute permission
            appendingCssStyle = "border: 2px solid #ff0000 !important;";
        }
        else
        {
            //user has no contribute permission
            appendingCssStyle = "border: 2px solid #4076af !important;";
        }
        }, function (sender, args) {
        console.log(args);
        });
        }

            CheckPermission(ctx.CurrentItem.Path)

        _#-->


                <div class="wrapperContainer" style="_#= appendingCssStyle =#_">
                    <div class="cbs-pictureOnTopImageContainer" style="background-image: url(_#= imageUrl =#_);" id="_#= pictureContainerId =#_"></div>
                </div>               

It think the order of the javascript and html render is not OK because I do not see the border. But see in the browser debugger it comes in the if when the current user has contribute permissions.

UPDATE

Is it because I use executeQueryAsync ?

Answer 1

JavaScript Object Model code which you have used, is asynchronous. Which means the execution is passed on to next statement and HTML is rendered without waiting for the result you get in your variable appendingCssStyle.

I doubt you will be able to achieve it with your existing code.

Possible solutions

1. Instead of assigning appendingCssStyle in HTML, You will have to think and try using Deferred and Promise. Where in promise function you append the style. This approach can be messy.
2. I consider the best approach would be to create a Control Display Template. Loop through all items (where the needed information you can store in hidden spans).

In control display template you can write your JavaScript code inside .OnPostRender function. Read Run any other javascript after the Display Templates have rendered the content

Answer 2

You can use JQuery to add styling to the div after the executeQueryAsync is completed. Try below code:

var divID= encodedId + "_div";
            if(isContributor)
            {
                //user has contribute permission                
                 $('#'+divID).css("border": "2px solid #ff0000 !important");
            }
            else
            {
                //user has no contribute permission
               $('#'+divID).css("border": "2px solid #4076af !important");
            }

And in the html mark up remove the style="_#= appendingCssStyle =#_">:

<div class="wrapperContainer" id="_#=divID=#_" >
                    <div class="cbs-pictureOnTopImageContainer" style="background-image: url(_#= imageUrl =#_);" id="_#= pictureContainerId =#_"></div>
                </div>