Carregando jQuery e jQuery UI no script JSLink

Question

Como eu usaria jQuery e jQuery UI (principalmente o componente classificável) em um script JSLink.

Até agora, tentei vários métodos de carregamento dinâmico de javascript no script JSLink, mas não consigo fazê-lo funcionar.No console do desenvolvedor web do Firefox, apenas diz que $ não está definido, jQuery não está definido e $.ui não está definido.

Answer 1

Se a página em que o JSLink está não estiver fazendo referência aos scripts jQuery e jQuery UI, você mesmo precisará carregá-los.Isto pode ser feito por exemplo:

function loadScript(url, callback)
{
    // adding the script tag to the head as suggested before
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = url;

   // then bind the event to the callback function 
   // there are several events for cross browser compatibility
   script.onreadystatechange = callback;
   script.onload = callback;

   // fire the loading
   head.appendChild(script);
}

de Incluir um arquivo JavaScript em outro arquivo JavaScript?

então você usa:

loadScript("url to jQuery", loadScript("url to jQuery UI", function (){
    // do your stuff here
});

Mas na minha opinião, sempre preciso de jQuery em minhas páginas, então adiciono-o através de um Delegate Control: Adicionando jQuery a todas as páginas do SharePoint com controles delegados

Neste caso você pode então usar

ExecuteOrDelayUntilScriptLoaded("jquery path", function(){
    // Your stuff here
});

Answer 2

Você pode usar a propriedade JSLink para carregar vários arquivos.Inclua um URL para o arquivo jQuery e você terá uma boa solução alternativa.Observe que você terá que usar um URL dentro do mesmo aplicativo da web; você não pode fazer referência à biblioteca de um CDN ou similar.

Tente algo assim:

$Field.JSLink="~sitecollection/Style Library/MicrosoftAjax.js|~sitecollection/Style Library/jquery-1.7.2.min.js|~sitecollection/Style Library/YourTemplate.js" 

Answer 3

Normalmente uso uma variante semelhante à que eirikb descreve em seu comentário:

if(typeof jQuery == 'function') 
    NotifyScriptLoadedAndExecuteWaitingJobs("jquery.js");
else if (LoadSodByKey('jquery.js', null) == Sods.missing) 
    RegisterSod('jquery.js', '//code.jquery.com/jquery-1.11.0.min.js');


SP.SOD.executeFunc("jquery.js", "jQuery", function () { 
    console && console.log("jquery loaded");
});

Answer 4

No seu script JSLink, comece com

(window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));

O resultado será algo assim.

(function () {
    (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));

    var overrides = {};
    overrides.Templates = {};

    overrides.Templates.Fields = {
        "FileLeafRef": {
            "NewForm": FillDefaultTitle
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrides);
})();

É claro que você precisa ter certeza de que os usuários podem acessar o local 'ajax.aspnetcdn.com/...'.Caso contrário, você precisará hospedar o arquivo jQuery em seu ambiente SharePoint.