JavaScriptGridstack框架懒散加载

为什么我想使用gridstack创建一个包含小Widged的页面。 我的问题是，当我“懒惰”加载widgeds时，gridstack不会初始化这个新的dom节点。（它们不是可移动的）有人能解释一下我是如何做到这一点的吗？ 我认为我的问题是$（'.grid stack'）.gridstack（选项）；正如我在这里看到的，只有一次executet：

或者是否有一个框架已经意识到“惰性”加载

index.html：

<div class="grid-stack" id="widgeds">
    <div class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide ui-resizable-disabled"
        data-gs-x="0" data-gs-y="0"
        data-gs-width="1" data-gs-height="1">
            <div class="grid-stack-item-content ui-draggable-handle">Item 1</div>
    </div>
    <div class="grid-stack-item"
        data-gs-x="1" data-gs-y="0"
        data-gs-width="1" data-gs-height="1">
            <div class="grid-stack-item-content">Item 2</div>
    </div>
</div>
<script type="text/javascript">
        var girdstackRefresh = function() {
            var options = {
                cell_height: 200,
                vertical_margin: 10
            };
            $('.grid-stack').gridstack(options);
        }
        $(function () {
            girdstackRefresh();

            loadWidged('/widgeds/chat', function() {
                girdstackRefresh();
            });

        });
//function for lazy loading:
var widgeds = {};
function loadWidged(srcUrl, onloaded) {
    $.get(srcUrl+"/meta.wjs", function(meta) {
        code = "var foo = function() { return "+meta+"; }\nfoo();";
        widged = eval(code);
        if(widged.singleton) {
            if(widgeds[widged.uid]) {
                throw({'message' : 'Error widged can only be loaded once'});
            }
        }
        widged.url = srcUrl;
        widged.init.bind(widged);
        var ui = $('<div class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide ui-resizable-disabled" data-gs-x="5" data-gs-y="1" data-gs-width="4" data-gs-height="2">')
        $("#widgeds").append(ui);
        widged.dom = ui;
        widged.init();
        widgeds[widged.uid] = widged;
        onloaded();
    });
}
        </script>

chat/chat.html：

<div class="grid-stack-item-content ui-draggable-handle">Item 2</div>

第2项

将懒散加载为回调或其他内容后加载，或使用setTimeout函数进行初始化。

将懒散加载为回调或其他内容后加载，或使用setTimeout函数进行初始化。

这可以通过使用

addWidget

或

makeWidget

文档中的函数：

---

makeWidget

用于将现有元素转换为gridstack元素，而

addWidget

将创建元素并使其成为小部件。

这可以通过使用文档中的

addWidget

或

makeWidget

函数来完成：

如果要将现有元素转换为gridstack元素，则使用

makeWidget

，而

addWidget

将创建元素并使其成为小部件

<div class="grid-stack-item-content ui-draggable-handle">Item 2</div>