Как загрузить несколько предметов в контейнер и инициализировать их? - PullRequest
Новая
       0

Как загрузить несколько предметов в контейнер и инициализировать их?

0 голосов
/ 01 марта 2011

Я пытаюсь создать простую веб-систему, которая загружает произвольное количество элементов (каждый из которых определяет свой собственный рендеринг HTML и динамическое поведение) в контейнере.Контейнер будет определять, какие элементы загружать, загружать их HTML с сервера, а затем инициализировать их параметрами.Вот упрощенный пример: 

<!-- container.xhtml -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"/>
    <script>
        var params = {};
        $(document).ready(function() {
            params = {'text': 'Text A'};
            resp = $.get('item.xhtml', function(data) {
                $('.container').append(data);
                // want to initialize the new node
                data.init(params);
            });
            params = {'text': 'Text B'};
            resp = $.get('item.xhtml', function(data) {
                $('.container').append(data);
                // want to initialize the new node
                data.init(params);
            });
        });
    </script>
    <div class="container">
    </div>
</body>
</html>

И пример элемента: 

<?xml version="1.0" encoding="UTF-8"?>
<!-- item.xhtml -->
<div class="item" xmlns="http://www.w3.org/1999/xhtml">
    <script>
        <!-- want this function to be called for each "item" node created -->
        function initialize(item, params) {
            item.find('.dynamic').text(params['text']);
        }
    </script>
    <div class="some_class">
        Some Content
    </div>
    <div class="dynamic">
        Replace me
    </div>
</div>

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу назначить функцию on_load с ее элементом.Я не могу дать div[@class='item'] идентификатор, потому что он может быть загружен несколько раз.

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

Можно ли изменить только код для item.xhtml, чтобы при его загрузкеcontainer.xhtml, вызовы data.init () вызовут функцию initialize () с соответствующим узлом элемента и параметрами?Если нет, то как можно достичь этой модели другими способами?Есть ли лучший подход к этой проблеме?

Ответы [ 2 ]

1 голос
/ 01 марта 2011

Простой пример указания направления:

Как насчет присоединения вашего кода к элементу с использованием пользовательского события, а затем вызова этого события при его загрузке. Что-то вроде ... 

    <script>
          $('.item').bind("init",function(params){
            this.text(params['text']);
         });
    </script>

и называет это

РЕДАКТИРОВАТЬ: Поправьте мой тупой вызов snytax 

$('.item:last').trigger('init',[{'text': 'Text B']);
0 голосов
/ 02 марта 2011

После нескольких часов бездействия мне удалось довольно близко подойти.

Контейнер: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"/>
    <script>
        var params = {};
        $(document).ready(function() {
            param_list = [
                {'text': 'Text A'},
                {'text': 'Text B'},
                {'text': 'Text C'}];
            for(param_index in param_list) {
                var params = param_list[param_index];
                init_func = function(params) {
                    return function(data) {
                        var node = $(data.documentElement)
                        $('.container').append(node);
                        // want to initialize the new node
                        node.trigger("initialize", [params]);
                    };
                }
                resp = $.get('item.xhtml', init_func(param_list[param_index]));
            }
        });
    </script>
    <div class="container">
    </div>
</body>
</html>

Пункт: 

<?xml version="1.0" encoding="UTF-8"?>
<div id="item" xmlns="http://www.w3.org/1999/xhtml">
    <script>
        <!-- want this function to be called for each "item" node created -->
        $('#item').bind("initialize", function(event, params) {
            $(this).find('.dynamic').text(params['text']);
        }).removeAttr('id');
    </script>
    <div class="dynamic">
        Other content
    </div>
</div>

Обратите внимание, что есть два ограничения:

  1. Дизайнер элемента должен назначить ID узлу и удалить его во время построения. Похоже, что это единственный способ для его собственного javascript связываться с его собственным узлом. Идентификатор необходимо удалить, чтобы он не конфликтовал с добавленными впоследствии элементами.
  2. Это не работает в Chrome (с WRONG_DOCUMENT_ERR), поскольку Chrome соблюдает стандарт W3C, в котором говорится, что узел DOM нельзя добавить из одного документа в другой. Это работает в Firefox, однако. Следующий шаг - выяснить, как динамически загружать узел без WRONG_DOCUMENT_ERR.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...