Динамически загружать шаблоны jQuery - PullRequest
Новая
       6

Динамически загружать шаблоны jQuery

5 голосов
/ 01 ноября 2010

Для шаблона jQuery:

http://api.jquery.com/category/plugins/templates/

Я хочу иметь возможность динамически загружать шаблоны с сервера, а не предопределять его на странице.

Демонстрации, которые я видел в проектах, используют предопределенные шаблоны.После некоторых исследований я обнаружил, что это возможно.

Я пытаюсь сделать это, и это не работает: 

<script src="child.html" type="text/x-jquery-tmpl"></script>

Я пытался сделать это, и это не работает: 

$(function () {
    $.get("child.html", function (data) {
        //Add template
        $.template("tmplChild", data);
    });

    //template binds before async call is done
    $.tmpl("tmplChild").appendTo("body");
});

И, наконец, я перешел к следующему хаку:

so.html (это главная страница): 

<html>
<head>
<title></title>
</head>
<body>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

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

<script type="text/javascript">

    $(function () {
        initTemplates(templateReady);
    });

    function templateReady() {
        $.tmpl("tmplChild").appendTo("body");
    }

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

child.html (это дочерний шаблон) 

<h1>Child Loaded</h1>

so.js (это мой хак для ajaxly загрузки шаблонов js) 

function initTemplates(callback) {
    var templateUrl = "child.html";
    var templateName = "tmplChild";

    initTemplate(templateUrl, templateName, callback);
}

function initTemplate(url, name, callback) {
    var opts =
        {
            type: "GET",
            url: url,
            dataType: ($.browser.msie) ? "text" : "xml",
            success: function (data) {
                xmlCallback(data, name, callback);
            },
            error: function (x) {
                xmlCallback(x.responseText, name, callback);
            }
        }

    $.ajax(opts);
}

function xmlCallback(data, name, callback) {

    if (typeof data != "string") {
        if (window.ActiveXObject) {
            var str = data.xml;
            data = str;
        }
        // code for Mozilla, Firefox, Opera, etc.
        else {
            var str = (new XMLSerializer()).serializeToString(data);
            data = str;
        }
    }

    //only takes strings!
    $.template(name, data);

    callback();
}

А вот что мне не нравится в этом.

  1. Это не работает в Chrome
  2. Кажется, что много кода просто для загрузки какого-то шаблона
  3. Я потерял возможность использовать $ (документ).готовы().Теперь я должен поместить весь свой код в этот метод templateReady (), чтобы он был «безопасным для шаблона».

Есть ли способ обойти это?

Спасибо,

Chi

Ответы [ 2 ]

3 голосов
/ 01 ноября 2010

Просто загрузите тело шаблона в виде простого текста и забудьте о вставке его в фиктивный блок <script>. Вы можете использовать $.tmpl(body, params), чтобы заполнить шаблон и превратить его в строку для добавления в DOM.

Все, что связано с "не совсем сценарием" <script> блоков - просто удобство, полезное в некоторых ситуациях.

edit & mdash; Пример: 

$.get("/some/url/for/a/template", function(templateBody) {
  var expandedTemplate = $.tmpl(templateBody, { param1: 0, param2: "Hello World" });
});
2 голосов
/ 02 ноября 2010

Если цель состоит в том, чтобы извлекать уникальный шаблон каждый раз, когда вы получаете данные через ajax, тогда вы можете попытаться извлечь шаблон одновременно и включить его в свои данные, то есть если у вас есть возможность изменить возвращаемый объект(анонимный объект в .Net).Затем вы можете сохранить шаблон в любом месте, и вам потребуется только 1 ajax-вызов как для данных, так и для шаблона.

...