Sunday, February 8, 2015

Using HandleBars.js in SharePoint

Recently got the chance to work on client side template.
The below images,region,terminal ,desc and url are rendering by Handlebars















   if (result == true) {
            $.ajax({
                type: "POST",
                async: false,
                contentType: "application/json; charset=utf-8",
                url: L_Menu_BaseUrl + "/_layouts/DPW.GSE.Assessment/Service/AssessmentService.aspx/LoadImageReferences",
                dataType: "json",
                data: JSON.stringify({ question: question, category: category }),

                success: function (data) {
                    data = eval(data.d);
                   // alert(data);
                    if (data.length > 0) {
                        ImageData = data;
                        if (ImageData != null && ImageData != "") {
                            var ResultAssesementImageData = new Object;
                            ResultAssesementImageData.ImageData = ImageData;
                            var source = $("#AssesementReferenceImageData-template").html();
                            var template = Handlebars.compile(source);
                            var ResultHtml = template(ResultAssesementImageData);
                          //  alert(ResultHtml);
                            $("#ppu342").html(ResultHtml);

                        }
                    }
                }
            });
















Handlebars.registerHelper("FILEURL", function (context, options) {

        if (context) {
            var queryString = window.location.href.split("/sites/")[0];
            if (context.indexOf('.jpg') > 1 || context.indexOf('.png') > 1 || context.indexOf('.JPG') > 1 || context.indexOf('.PNG') > 1) {

                return queryString + "/" + context;
            }
            else {        
                return queryString + "/" + "//_LAYOUTS//1033//IMAGES//cilayout_picker.gif";
            }
        }
    });
https://rmanimaran.wordpress.com/2014/12/12/sharepoint-2013-using-handlebars-js-in-sharepoint-part-3/