JSLink Client-side rendering

Question

I need to render some fields client-side,
I followed this guide: Client-side rendering but this code is not working:

(function () { 

    // Create object that have the context information about the field that we want to change it's output render  
    var priorityFiledContext = {}; 
    priorityFiledContext.Templates = {}; 
    priorityFiledContext.Templates.Fields = { 
        // Apply the new rendering for Priority field on List View 
        "Title": { "View": priorityFiledTemplate } 
    }; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext); 

})(); 

// This function provides the rendering logic for list view 
function priorityFiledTemplate(ctx) { 
   alert("in");
   return "New Title";
} 

I binded the script in the JSLink section of the webpart. (the script is in the Layout filder)

Answer 1

I think this should work

RegisterModuleInit('/<yourSiteName>/SiteAssets/<yourJSfilename>.js', updateTitle);
updateTitle();

function updateTitle() {
    var priorityFiledContext  = {};
    priorityFiledContext.Templates = {};    
    priorityFiledContext.Templates.Fields = {
        "Title": {
            "View": priorityFiledTemplate
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);
}

function priorityFiledTemplate(ctx) {
    return "New Title";
}

Also i suggest uploading the .js file in your Site Assets Library and linking it to the Webpart (edit > misc > JSLink) with:

~site/SiteAssets/<yourJSfilename>.js

remember to Change and Also I suggest to use JSBin to check your future code for Syntax Errors and also use the browser console (press F12) to debug. Make sure you select script in the console and refresh after you upload your script, to see where any Problems were encountered (if any).

Answer 2

(function () {
    // Intialize the variables for overrides objects
    (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
        'Color': 
        {
        'NewForm': ingredientsNewAndEdit
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})(); 


function ingredientsNewAndEdit(Ctx) {       
    alert("Test");      
    var formCtx =SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);      
    var FieldHtml = "<div><input type='Text' Id='txtColor' FieldInternalName='Color'FieldType='SPFieldText'/></div>";       
    return FieldHtml;
}

this Code is perfectly render the control .

Just check it out your path of the js link . your webpart is at sitecollection level or web level ? if sitecollection level than

Path : ~Sitecollection/(Your Jslink file path) (Sitecollection)

Path : ~Site/(your jslink file path)(Web level)