Question

我正在尝试创建一个简单的Web系统，它在容器中加载任意数量的项目（每个项目定义自己的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']提供ID，因为它可能会多次加载。

我想维护一个简单的容器，只需要加载一个文件并调用一些指定的函数来初始化该项。如果必须修改容器以启用此模型，则最小化容器和项目之间的接口非常重要。

是否可以仅更改item.xhtml的代码，以便在通过container.xhtml加载时，对data.init（）的调用将使用相应的项节点和params调用initialize（）函数？如果没有，如何通过其他方式实现这个模型？这个问题有更好的方法吗？

Answer 1

指向方向的简单示例：

如何使用自定义事件将代码附加到元素，然后在加载时调用该事件。有点像...

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

并将其称为

编辑：纠正我的愚蠢呼唤snytax

$('.item:last').trigger('init',[{'text': 'Text B']);

Answer 2

经过几个小时的骚动，我设法非常接近。

容器：

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

请注意，有两个限制：

项目设计者必须为节点分配ID并在构造期间将其删除。这似乎是他自己的javascript绑定到自己的节点的唯一方法。必须删除该ID，以免与随后添加的项冲突。
这在Chrome中失败（使用WRONG_DOCUMENT_ERR），因为Chrome尊重W3C标准，该标准指出无法将DOM节点从一个文档添加到另一个文档。但它适用于Firefox。下一步是弄清楚如何在没有WRONG_DOCUMENT_ERR的情况下动态加载节点。

如何将多个项目加载到容器中并初始化它们？

2 个答案: