디스플레이 템플릿이 내용을 렌더링 한 후 다른 JavaScript를 실행하십시오.

Question

이 문제입니다 :

1. 사용자 정의 디스플레이로 지정된 ContentBySearchWebPart를 만듭니다. 템플릿. '
2. 디스플레이 후 다른 JavaScript 코드를 실행하고 싶습니다. 템플릿은 콘텐츠 를 렌더링했습니다

3. i 다음 내 사용자 정의 JavaScript 파일을 디스플레이 템플릿에 등록합니다.

           $includeScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Slider.js")'
   

   .

   문제는 my slider.js 파일 코드 가 '디스플레이 전에 을 실행한다는 것입니다. 템플릿 'JavaScript 코드가 수행됩니다.

   누구나 내 slider.js 코드 후에 을 실행하는 방법을 제공 할 수 있습니까? 디스플레이 템플릿은 콘텐츠를 렌더링했습니다 ContentBySearchWebPart (CSWP)?

Answer 1

:) my issue is solved.

I did following:

1. Registered the custom JS file in Control_YourTemplateName.html file(like Control_Banner).

   $includeScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/HWScripts/Banner.js");

2. Added these three lines under the first div after body tag, in YourTemplateName.html (like Banner.html) file.

    <!--#_  
    ctx.OnPostRender = [];
    ctx.OnPostRender.push(function(){ 
       CustomMethodWhichIsIncludedInTheCustomJSFile();
    });
    _#-->  
   

But a better solution is provided below:

You can skip defining OnPostRender yourself. CBS Display Templates have this function baked in:

<!--#_
   AddPostRenderCallback(ctx, function(){
       alert(ctx.Title + "finished rendering!");
   });
_#-->

There is also AddPreRenderCallback(ctx, function(){});

Answer 2

스크립트를 포함한 다음 코드 줄을 추가 할 수 있습니다.

ExecuteOrDelayUntilScriptLoaded( function() { <your custom function name>; }, 'name of   display template ');

.

예 :

ExecuteOrDelayUntilScriptLoaded( function() { console.dir( SP.Res ); }, 'sp.js');

.