자바 스크립트의 모질라 레이아웃 및 위치 지정

대부분의 스크립트를 기본 레이아웃 (예 : jquery)에로드하려고합니다. 지금 내 이해에서 내 HTML 페이지의 맨 아래에 스크립트를 배치하는 것이 가장 좋습니다.자바 스크립트의 모질라 레이아웃 및 위치 지정

그러나 레이아웃 페이지의 맨 아래에 스크립트를 넣으면.

layout/default.html.ep 

<!doctype html> 

<html> 
<head><title><%= title %></title></head> 
<body><%=content %></body> 
</html> 
<script src="js/jquery.min.js" type="text/javascript"></script>

그런 다음 jquery에 의존하는 고유 한 javascript가있는 페이지에서이 레이아웃을 사용하십시오.

testscript.html.ep 
%layout 'default'; 
%title 'Script Test'; 

<p>Main Page</p> 

<script type="text/javascript"> 
$(document).ready(function(){ 
alert('fails if jquery is not loaded'); 
}); 
</script>

이렇게하면 페이지가 생깁니다. jquery에 대한 참조가 내 코드에 의존한다는 점에 유의하십시오.

<!doctype html> 

<html> 
<head><title>Script Test</title></head> 
<body> 
<p>Main Page</p> 

<script type="text/javascript"> 
$(document).ready(function(){ 
alert('fails if jquery is not loaded'); 
}); 
</script> 
<script src="js/jquery.min.js" type="text/javascript"></script> 
</body> 
</html>

이 상황을 처리하는 가장 좋은 방법은 무엇입니까?

내 레이아웃 맨 위에 내 자바 참조를 넣으시겠습니까? 이 레이아웃을 사용하는 모든 페이지에서 jquery에 대한 스크립트 참조를 추가하는 것이 좋지 않다고 생각합니다.

도움을 주시면 감사하겠습니다. 나는이 모든 것에 매우 새로운 사람이다.

건배.

출처

2013-02-26 user1768233

죄송합니다. 죄송합니다. Mojolicious를 사용하는 대부분의 사람들은 Perl 태그를 따릅니다.

질문에 답하려면 content_for 도우미를 사용하여 원하는 곳에 배치 할 수 있습니다. 이렇게하면 가져 오기를 종속 템플릿의 맨 위에 놓을 수도 있고 원하는 경우 맨 아래에 넣을 수도 있습니다! 아래 예가 있습니다. 모든 페이지에 필요한 표준 JS 가져 오기에 대해 별도의 템플릿을 사용하는 것이 좋습니다. 당신은 '/'경로를 방문 할 때

#!/usr/bin/env perl 

use Mojolicious::Lite; 

any '/' => 'testscript'; 

app->start; 

__DATA__ 

@@ layouts/default.html.ep 

<!DOCTYPE html> 
<html> 
    <head> 
    <title><%= title %></title> 
    </head> 
    <body> 
    %= content 
    %= include 'common_js' 
    %= content_for 'js_imports' 
    </body> 
</html> 

@@ common_js.html.ep 
<script src="js/jquery.min.js" type="text/javascript"></script> 

@@ testscript.html.ep 
%layout 'default'; 
%title 'Script Test'; 

% content_for 'js_imports' => begin 
    %= javascript begin 
    $(document).ready(function(){ 
     alert('fails if jquery is not loaded'); 
    }); 
    % end 
% end 

<p>Main Page</p>

,이

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Script Test</title> 
    </head> 
    <body> 


<p>Main Page</p> 

    <script src="js/jquery.min.js" type="text/javascript"></script> 

     <script>//<![CDATA[ 

    $(document).ready(function(){ 
     alert('fails if jquery is not loaded'); 
    }); 

//]]></script> 
    </body> 
</html>

출처

2013-03-27 20:41:37

감사합니다 조엘을 생산! 멋진데, 나는 빠른 테스트를했는데 이것은 AJAX를 사용하여 동적으로 DOM의 일부를 변경하고 html 콘텐츠뿐만 아니라 새로운 javascript를 추가 할 때 작동하는 것으로 보인다. 나는 이전에 javascript를 사용하여 동적으로 내 페이지에 스크립트를 추가했지만이 스크립트는 훨씬 깔끔하게 보입니다. 감사! – user1768233

사실, 나는 곧 이야기했다. Ajax와 content_for를 사용하는 데 문제가 있습니다. 이 문제는 제가하는 일로 가장 할 것 같습니다. 나는 별도의 질문을 게시 할 것이다. – user1768233

다른 질문을 추가했습니다. http://stackoverflow.com/questions/15713470/using-content-for-and-and-ajax-jquery-to-partially-update-webpage – user1768233

자바 스크립트의 모질라 레이아웃 및 위치 지정

답변

관련 문제