SharePoint 2013 - Create JS templates view

SharePoint 2013 has a new feature that you can write custom js codes to render a view rather than xslt view.

Here are the quick steps,

1. Create the custom list and their columns
    In SharePoint 2013, there is list designer that is much easier to create the list content type and columns,

 
2. Create a new view and include the fields you will reference in the java script, those fields can be called by context.CurrentItem.FieldName

3. Add the JSLink to the javascript file, such as
<JSLink Default="TRUE">~site/Scripts/<your custom javascript file>.js</JSLink>

4. Create a new Scripts module and write a custom java script to deploy them, Here is a quick example,


(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.BaseViewID = 2; // the custom view ID
    overrideCtx.ListTemplateType = 10001; //the template type

    overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B><hr><ul>";
    overrideCtx.Templates.Footer = "</ul>";
    overrideCtx.Templates.Item = CustomItem;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function CustomItem(context) {
    var ret = "<li>This is a " + context.CurrentItem.Title+ " - " + context.CurrentItem.ISBN + "</li>";
    return ret;
}