웹 사이트 동적 콘텐츠

HTML 콘텐츠를 제공하는 데 사용할 수있는 자바 스크립트 라이브러리가 있습니까? 내용을 동적으로 변경할 수있는 DIV를 만들고 싶습니다. 웹 사이트 동적 콘텐츠

<div id="header"> 
    <h2>Header here</h2> 
</div> 

<div id="dynamic-content"> 
    <p>-- Dynamic content here --</p> 
</div> 

<div id="footer"> 
    <h3>Footer</h3> 
</div>

난 그냥 서버에서 HTML 태그를 검색,이를 위해 jQuery를 사용하고 #dynamic-content의 내용을 대체하는 jQuery의 html() 기능을 사용할 계획입니다. retrived HTML 마크 업이 "커다란"경우 실용적 일지 궁금해서 전체 기사를 말할 수 있습니다.

간단한 자바 스크립트 템플릿 프레임 워크가 있습니까? 아니면 JS 프레임 워크를 템플릿으로 사용할 수 있습니까?

출처

2014-02-20 Durty

이 작업을 수행하려면 보다 현대적인 방식으로 Angular, Knockout 또는 양방향 데이터가있는 다른 JS 프레임 워크를 사용하고자 할 것입니다. 바인딩. 그러나 이것들과 관련된 약간의 학습 곡선이 있습니다. 애플리케이션에서 jQuery로 즉시 폴링 /로드 한 경우가 많습니다. 잘못되었거나 바른 길을 생각하지 않습니다. –

큰 문자열을 전달하려는 경우 클라이언트 측 템플릿 솔루션 (핸들 막대, 콧수염 등)을 사용하는 것이 더 나을 것입니다. –

@ GregJennings 서버에서 HTML 마크 업을 검색 한 다음 Handlerbars 또는 Mustache에 대한 마크 업은 괜찮습니까? – Durty

--Helper--

var uiHelper = function() { 

    var htmls = {}; 

    var getHTML = function (options) { 
     /// <summary>Returns HTML in a string format</summary> 
     /// <param name="options" type="object">options{url:The url to the file with the HTML,successCallback:function,errorCallback:function,isAsync:true||false,cache:true|false}</param> 

     function xhrSuccess() { 
      if (this.cache) { htmls[this.url] = this.responseText; }; 

      if (this.successCallback) { 
       this.successCallback.apply(this.responseText, this.arguments); 
      } else { 
       return htmls[this.url]; 
      }; 
     }; 
     function xhrError() { 

      if (this.errorCallback) { 
       this.errorCallback.apply(this.statusText); 
      } else { 
       return this.statusText; 
      }; 
     }; 

     if (!htmls[options.url]) { 
      var xmlhttp = new XMLHttpRequest(); 
      xmlhttp.open("GET", options.url, options.isAsync); 
      xmlhttp.cache = options.cache || false; 
      xmlhttp.url = options.url; 
      xmlhttp.onload = xhrSuccess; 
      xmlhttp.onerror = xhrError; 
      xmlhttp.successCallback = options.successCallback || undefined; 
      xmlhttp.errorCallback = options.errorCallback || undefined; 
      xmlhttp.send(); 
     } else { 

      if (options.successCallback) { 
       options.successCallback.apply(htmls[options.url], this.arguments); 
      } else { 
       return htmls[options.url]; 
      }; 
     }; 
    }; 

    return { 
     getHTML: getHTML 
    }; 
}();

사용법 ---

uiHelper.getHTML({ 
     url: url, isAsync: true, cache: false, successCallback: function() { 

      document.getElementById('dynamicContent').innerHTML = this; 
     } 
    });

- 당신의 HTML ---

<div id="header"> 
    <h2>Header here</h2> 
</div> 

<div id="dynamic-content"> 
    <p id='dynamicContent'>-- Dynamic content here --</p> 
</div> 

<div id="footer"> 
    <h3>Footer</h3> 
</div>

출처

2014-02-20 02:31:46

올바른 aanswer로 표시하는 것을 잊지 마십시오. –

음 , 나는 추천한다. 이 jQuery 플러그인 : jquery.tmpl

GitHub의 :이 도입 https://github.com/BorisMoore/jquery-tmpl

입니다 :

PPT : http://skilldrick.co.uk/tmpl/

기사 : http://footyntech.wordpress.com/2013/08/20/simple-javascript-templating-with-jquery-tmpl/

출처

2014-02-20 02:49:20

그래서 서버에서 HTML 마크 업을 검색하는 것은 기본적으로 그것을 jQuery에 제공하는 것입니까? 그런 다음''tmpl '? – Durty

서버에서 json의 데이터를 검색합니다 (예 : jquery ajax 또는 serverSide 언어 (예 : php, java, nodejs)). jquery.tmpl을 사용하여 HTML 마크 업을 만듭니다. HTML 마크 업을 전송할 불필요한 시간을 줄입니다.그리고 여기 아약스 예입니다

<스크립트 ID = "movieTemplate"유형 = "텍스트/X-JQuery와-tmpl">

$ {이름} ($ {ReleaseYear})

<스크립트 유형 = "텍스트/자바 스크립트"> $ 갔지 ("/ 사용자/서버/api.json /", 기능 (응답) { $ ("#movieTemplate") .tmpl (응답). appendTo ("#movieList"); }, "json"); –

웹 사이트 동적 콘텐츠

답변

관련 문제