HTML 파일에서 스크립트를 가져 와서 자신의 .JS 파일로 옮기는 방법은 무엇입니까?

내 HTML 파일을 단순화하려고하고 있으며 자체 외부 파일로 이동하려는 HTML (템플릿)로 구성된 매우 긴 스크립트가 있습니다. 이것은 <script> 태그가 기능을 포함하고있을 때 쉽게 할 수 있지만 제 경우에는 HTML입니다. 새 외부 파일에서 해당 HTML 태그를 올바르게 입력하는 방법은 무엇입니까? 아래를 참조하십시오.HTML 파일에서 스크립트를 가져 와서 자신의 .JS 파일로 옮기는 방법은 무엇입니까?

<script type="text/template7" id="myStuffTemplate"> 
    {{#each results}} 
    <div class="list-block media-list"> 
    <ul> 
     <li> 
     <a href="#" class="item-link item-content"> 
      <div class="item-media"><img src={{this.pictures['1']}} width="80" height="80px"></div> 
      <div class="item-inner"> 
      <div class="item-title-row"> 
       <div class="item-title">{{this.name}}</div> 
      </div> 
      <div class="item-text">{{this.description}}</div> 
      </div> 
     </a> 
     </li> 
    </ul> 
    </div> 
    {{else}} 
    <div style="text-align:center"> 
    <h1>Nothing yet!</h1> 
    <h2>Upload things you're willing to trade so you can start trading!</h2> 
    </div> 
    {{/each}} 
</script>

HTML 파일 내의 스크립트입니다. 나는 그것이 자신의 외부 파일로 옮겨 졌으면 좋겠다. 어떻게이 일을 할 수 있습니까? 그리고 링크 할 때 다른 모든 파일처럼 참조합니까? 예 :

<script type="text/template7" src="js/views/mystuff.js" id="myStuffTemplate"></script>

미리 감사드립니다. 모든

출처

2016-11-10 tman091

당신이 Handlebars 나 EJS를 사용하려고하는 것처럼 보입니다. 이것은 내가 믿는 서버에서 올 필요가 있습니다. 그렇지 않으면 단순히 .js 파일을 고수하고 유형을'text/javascript'로 변경하고 id를 제거하십시오. –

나는 이것을하기 위해 [Template7] (http://idangero.us/template7/#.WCO6uJMrJTY)을 사용하고 있는데, 그것은'id'와'type'을 필요로합니다. 그게 까다로운 일입니다. 스크립트가 HTML 파일에 있으면 완벽하게 작동합니다. 그러나 내가 그것을 자신의 파일로 옮길 때 운이 없다. – tman091

서버 측 포함을 사용할 수 있습니까? – user2182349

이, 그것은 하나의 핸들로 만든 템플릿 스크립트입니다하지 않습니다 또는 콧수염 템플렛.

자바 스크립트로 할 수있는 것처럼 <script src="...">으로 소스를 지정할 수는 없지만 외부에 저장 한 다음 런타임에로드하고 처리 할 수 있습니다. 이것은 AJAX 호출을 통해 비동기 적으로 수행되어야합니다. 예를 들어, jQuery를 사용하고 가정, 다음에 그것을 달성 할 수 :

// request the template 
$.get('templates/products.hbs', function(rawTemplate) { 
    // once received, convert the raw template to a handlebars template 
    var template = Handlebars.compile(rawTemplate); 
    // compile the template with your context 'data' and set it on an element with an id 
    $('#someTargetId').html(template(data)); 
}, 'html'); // <-- tell jquery to load the file as html

그냥 아주 작은 템플릿을로드하는 데 시간이 좀 걸릴 것입니다, 그래서 당신의 페이지 로딩과 사이에 지연이있을 것이다, 경고 템플릿로드가 표시됩니다.

출처

2016-11-10 00:44:07 Soviut

좋은 지적. 나는로드 속도에주의를 기울일 필요가있을 것입니다 - 이것은 고려해야 할 [Template7] (http://idangero.us/template7/#.WCO6uJMrJTY) 제한이어야합니다. 내 HTML 파일은 내가 생각하기에 조금 더 머물러 야 할 것이다. 아니면 다른 해결책을 고려해야 할 것이다. 귀하의 의견을 보내 주셔서 감사합니다. – tman091

-1

먼저, 그러나 이것은 당신을 위해 작동합니다 Angular.js 또는 React.js 같은 프레임 워크를 사용하는 것이 좋습니다 :

이의 당신이 ID로 사업부 내부에 그것을 넣어한다고 가정하자 = 항목 : <div id="items"> Your code... </div>

HTML 파일에서

그냥 <body> 닫는 태그 전에이 추가 :

<script type="text/javascript" src="code.js"></script> 은 대구를 포함하는 e와 this <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> jQuery가 포함됩니다.

가 code.js 파일을 만듭니다

$(document).ready(function() { 
    var myCode = "{{#each results}}" + 
"<div class="list-block media-list">" + 
    "<ul>" + 
    "<li>" + 
     "<a href="#" class="item-link item-content">" + 
     "<div class="item-media"><img src={{this.pictures['1']}} width="80" height="80px"></div>" + 
     "<div class="item-inner">" + 
      "<div class="item-title-row">" + 
      "<div class="item-title">{{this.name}}</div>" + 
      "</div>" + 
      "<div class="item-text">{{this.description}}</div>" + 
     "</div>" + 
     "</a>" + 
    "</li>" + 
    "</ul>" + 
"</div>" + 
"{{else}} " + 
"<div style="text-align:center">" + 
    "<h1>Nothing yet!</h1>" + 
    "<h2>Upload things you're willing to trade so you can start trading!</h2>" + 
"</div>" + 
"{{/each}}"; 

$("#items").html(myCode); 
});

출처

2016-11-10 00:38:20 reinier

HTML 파일에서 스크립트를 가져 와서 자신의 .JS 파일로 옮기는 방법은 무엇입니까?

답변

관련 문제