JS Link Tutorial, Sharepoint 2013

there are many suppose to be tutorial about JSLink, but none start form the beginning
some history http://bresleveloper.blogspot.co.il/p/evolution.html

basically JSLink is the cliend side way of data-binding and rendering you sharepoint things to ... well it can be sharepoint lists and libraries and it can be your pages.

it works like this, the moment you put a url to your js file the item / field / webpart sends all of its data to the client and run your js

so what do we have? well best putted is this image from this blog:
http://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

this means that each part you see here is actually a JS function that accepts the context with all the data and returns some HTML

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Header = HeaderOverrideFun;
    overrideCtx.Templates.Item = ItemOverrideFun;
    overrideCtx.Templates.Footer = FooterOverrideFun;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

　
function HeaderOverrideFun(ctx) {
    return "<div> <h1> BIG TITLE </h1> <ul>"
}
function ItemOverrideFun(ctx) {
    return "<li>" + ctx.CurrentItem.Title + "</li>";
}
function FooterOverrideFun(ctx) {
    return "</ul> <h6> small footer </h6> </div>"
}

go ahead and try it, just add any web part from your apps gallery (which is your lists)

NOTE that the (function () { ... } )(); is just a way to register an anonymous function and run it immediately, you would achieve the same with strait writing the cold like this

var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Header = HeaderOverrideFun;
overrideCtx.Templates.Item = ItemOverrideFun;
overrideCtx.Templates.Footer = FooterOverrideFun;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

　
writing or wrapping it with a named function and calling it:
　
function go() {
    var overrideCtx = {};
    //...
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
};
go(); 

with most example you will see the anon ctor for convenient and encapsulation.

so we've seen Header, Item, Footer, where is the rest?

well if you use Body and Groups you will not get to use the Items function, instead you will have to write your own loop

for (var i = 0; i < ctx.ListData.Row.length; i++) {
    var listItem = ctx.ListData.Row[i];
    var ID = parseInt(listItem['ID']);
    var row = document.getElementById(GenerateIIDForListItem(ctx, listItem));
    if (row) {
        if ( (ID % 2) === 0 ) {
            row.style.backgroundColor = 'blue';
        }
    }
} 

There is an hierarchy:
if you use View than you have nothing but it.
with Body you have Groups and Header and Footer, but not item.
if you dismiss the above you get to use item.

about customizing fields see more here
http://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views


AND IF I NEED CALLBACKS?
haha, yes you have it. the template has Pre and Post render callbacks,

overrideCtx.OnPreRender = PreRenderHandler;
overrideCtx.OnPostRender = PostRenderHandler; 

you can do anything you want there, PLUS you have the context with all its data!
BTW! the post render is AFTER the html is inserted to the DOM,

again thx to http://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views


IS THAT IT?
well, yes and no.

for the webparts, as long as you have only 1 in your page you're ok. after that sharepoint doesn't know which you want to render, so you need to put identifiers, named ListTemplateType and BaseViewID

var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.ListTemplateType = 109;
overrideCtx.BaseViewID = 1; 

ListTemplateType is an enum, most values you have here, there rest you can find either on the net or just test it, and BaseViewID is usually 1, but sometimes it changes (or you want another one)
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.client.listtemplatetype

IS THAT IT?
almost. what if you need more columns than what you currently have? well the as you noticed there is this BaseViewID which is actually the view used for that list, so just add more columns to display in that view.
i tried to change the view in edit mode and it worked but not after saving into display mode, maybe if we would change the default view?...

next is a tutorial for Royal Slider!