Загрузить jQuery-шаблоны из внешнего файла?

Я только начал использовать механизм шаблонов jQuery. До сих пор это выглядит неплохо. Тем не менее, я задаюсь вопросом, можно ли каким-то образом загрузить шаблоны из внешнего файла. Представьте, что у вас есть множество шаблонов. Это испортит html-код, а также не кэшируется, и его нужно загружать по каждому запросу.

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

Есть ли у кого-нибудь идея, как загрузить их из внешнего файла?

Ответ 1

вы можете загрузить этот шаблон с помощью ajax.

<script>
  var movies = [
    { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
    { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
    { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
  ];

  $.get("templates/movieTemplate.html", function(data, textStatus, XMLHttpRequest){
    var markup = data; //"<tr><td colspan='2'>${Name}</td><td>Released: ${ReleaseYear}</td><td>Director: ${Director}</td></tr>"

    /* Compile markup string as a named template */
    $.template( "movieTemplate", markup );

    /* Render the named template */
    $.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );
  });
</script>

Теперь вы можете добавить логику localstorage или массив для загруженных шаблонов, если хотите загрузить любой шаблон только один раз.

Ответ 2

Я написал litle lib как плагин jQuery для ajax-рендеринга html на появляющемся блоке с кэшированием indexDB в браузере jQuery HTML Template Loader

Ответ 3

Недавно я написал javascript-библиотеку, чтобы помочь с этим:

https://www.github.com/stevenmhunt/tmpl.loader

Вы можете добавить jsRender или любые другие файлы шаблонов, используя тег <link>, и они автоматически регистрируются.