domingo, 21 de septiembre de 2014

Cómo utilizar el debugger de Visual Studio con client side rendering

Primero verifico que esté desmarcado las siguientes opciones en las propiedades avanzadas del IE.

image

(function () {
    var itemCtx = {};
    itemCtx.Templates = {};
   
    itemCtx.Templates.Header = "<table>";
    itemCtx.Templates.Footer = "</table>";
    itemCtx.Templates.Fields = { 'Title': { 'View': ItemOverrideFun}};
    itemCtx.BaseViewID = 1;
    itemCtx.ListTemplateType = 101;         
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
})();

function ItemOverrideFun(ctx) {   
   debugger;
    var title = ctx.CurrentItem.Title;
    var fileRef = ctx.CurrentItem["FileRef"];
    var fileLeafRef = ctx.CurrentItem["FileLeafRef"];  
       var htmlToDeploy = "<a style='color:#000; font-weight:bold' href='" + ctx.CurrentItem["FileRef"] + "'>" + ctx.CurrentItem.Title + "</a><br><span>" + formattedDate(ctx.CurrentItem.Modified)  + " for <b><font color='#f58228'> "+ ctx.CurrentItem.Customer[0].lookupValue +"</font></b></span>";
 
    return htmlToDeploy;
}

En la función ItemOverrideFun, vemos la palabra debugger, esta es una palabra reservada que permite invocar el JIT (just in time) debugger

Al ejecutarse esta línea en el IE, me lanza la siguiente ventana

image

Al abrir el Visual Studio 2013, veo el stack de llamadas y me permite debuggear con VS

image

Si marca la variable htmlToDeploy, y selecciono Add Watch

image

image

Puedo ver el html que se renderiza en la página de forma fácil

image

Si veo en la página como queda,

image

No hay comentarios:

Publicar un comentario