Question

我可以使用任何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框架吗？

Answer 1

<强> - 助手 -

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>

Answer 2

好吧，我推荐你这个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/

：）

网站动态内容

2 个答案: