Форум

id5555 · #1 (**permalink**) 19.12.2011, 11:24

Есть html куски, которые должны грузится в зависимости от определенных условий. Можно подгружать js скрипты в которых будет что-то подобное:

document.getElementById(CONTAINER_ID).innerHTML = "<div>...</div>";

Но html слишком большие, и редактировать их не удобно. Есть ли способ загружать html(или что-либо ещё) файлы и встраивать их динамично?

Надеюсь понятно объяснил

Skipp · #2 (**permalink**) 19.12.2011, 11:41

Насчёт html: читайте про ajax.
А насчёт файлов: не представляю о каких файлах идёт речь

id5555 · #3 (**permalink**) 19.12.2011, 12:34

Спасибо. Нашел здесь: http://stackoverflow.com/questions/5...l-js-with-ajax

Необходимо было следующее:

$.ajax({ url: 'http://aaa.ru/bbb.html', success: function(html){
  $('#container').html(html);
}

ASerputko · #4 (**permalink**) 19.12.2011, 12:48

Первый вариант ajax-ом
Второй вариант с тегом <script>

...
<body>
    <div id="home"></div>
    <script type="text/html" id="template_1">
        //тут верстка
    </script>
    <script type="text/html" id="template_2">
        //тут верстка
    </script>
    ...
</body>

А с помощью скриптов делаешь следущее:

var template = $('#template_1').html();  // естественно id динамически определяются и подставляются.
$('#home').append(template);

Skipp · #5 (**permalink**) 19.12.2011, 12:57

ASerputko,
А какие преимущества в этом методе?
Мне кажется тут одни недостатки.
Заместо script уж лучше поставить скрытый div и просто по требованию его показывать.

melky · #6 (**permalink**) 19.12.2011, 19:56

это лишний html.

а вот от jquery я бы посоветовал отказаться, если, конечно, она используется несколько шире, чем совершение ajax-запроса.

ksa · #7 (**permalink**) 19.12.2011, 20:22

Сообщение от id5555

Есть ли способ загружать html(или что-либо ещё) файлы и встраивать их динамично?

Серверные языки не используются принципиально?

ASerputko · #8 (**permalink**) 19.12.2011, 20:25

Skipp,
Если открыть-закрыть картинку (какойнить блок с инфой), то да достаточно будет и спрятаных дивов. Но я предлагаю хранить там шаблоны, с переменными, форычами и т.д.
+ такой подход легко интегрируется в оффлайн приложение =)

ну к примеру

...
<script type="text/html" id="template_2">
        <div><%= title %></div>
        <% _.each(news, function (item) { %>
		<div><%= item %></div>
	<% }); %>
</script>
...

var data = {
    title : 'Last News!!!',
    news : [...] //тут перечень новостей... 
}
var template = _.template($('#template_2').html());
$('#home').append(template(data))

Skipp · #9 (**permalink**) 20.12.2011, 09:34

ASerputko,
По моему это извращение, есть более простые и не менее красивые способы.

В данном случаи человеку приходиться придумывать свою разметку, что после, допустим через пол года, будет не так просто вспомнить и я считаю это минусом номер один. Не вижу смысла делать разметку в разметке. И кстати, вы так и не сказали почему именно в script, так как тоже самое можно практически в любом другом элементе сделать.

ASerputko · #10 (**permalink**) 21.12.2011, 11:54

Skipp,
1. script - скрывает содержимое внутри.
2. Область видимости id-шников, классов, тегов,...

...
<body>

    <div id="container"></div>
    <!--Templates -->
    <script type="text/html" id="template_1">
        <div id=container><%= context %></div>
    </script>
    <script type="text/html" id="template_2">
        <div id=container><%= context %></div>
    </script>
    ...
</body>

Если в загруженом html документе обратиться к id 'container', то будет доступ только к первому, который не обернут тегом <script>

Форум

Справочник

Discord чат

Курсы javascript