網站動態內容

是否有任何JavaScript庫可用於提供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>

我打算使用jQuery爲此，只需從服務器檢索的HTML標記，然後使用jQuery的html()功能，以取代#dynamic-content內容。我只是好奇，如果這是可行的，如果回車的HTML標記是「大」，可以說一整篇文章。

有沒有一個簡單的JavaScript模板框架？或者，我甚至可以爲此使用模板JS框架？

來源

2014-02-20 Durty

要做到這一點以更「現代」的方式，您希望使用像Angular，Knockout或其他具有雙向數據的JS框架捆綁。儘管如此，還是有一些輕微的學習曲線。我知道很多我使用jQuery在應用程序中輪詢/加載內容的情況。我不認爲有錯誤或正確的方法。 –

如果你打算傳遞一大串html，你最好使用客戶端模板解決方案（把手，小鬍子等） –

@GregJennings如果我從服務器獲取HTML標記，然後餵食Handlerbars或小鬍子的標記還好嗎？ – 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 
    }; 
}();

--usage ---

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

不要忘記標記爲正確的答案。 –