Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Создание модульного приложения (https://javascript.ru/forum/misc/24149-sozdanie-modulnogo-prilozheniya.html)

id5555 19.12.2011 11:24

Создание модульного приложения
 
Есть html куски, которые должны грузится в зависимости от определенных условий. Можно подгружать js скрипты в которых будет что-то подобное:
document.getElementById(CONTAINER_ID).innerHTML = "<div>...</div>";

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

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

Skipp 19.12.2011 11:41

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

id5555 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 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 19.12.2011 12:57

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

melky 19.12.2011 19:56

это лишний html.

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

ksa 19.12.2011 20:22

Цитата:

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

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

ASerputko 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 20.12.2011 09:34

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

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

ASerputko 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>


Часовой пояс GMT +3, время: 22:28.