Фреймворк гридаста javascript

Question

Привет, я хочу использовать гридстек для создания страницы с маленькими виджетами. Моя проблема в том, что когда я "ленивый" загружаю виджеты, gridstack не инициализирует новые узлы dom. (они не движимы) Может кто-нибудь объяснить мне, как я делаю это правильно? я думаю, что моя проблема в том, что $('.grid-stack').gridstack(options); выполняется только один раз, как я видел здесь: https://github.com/troolee/gridstack.js/blob/master/src/gridstack.js#L1727

Или есть фреймворк, который уже знает о "ленивой" загрузке.

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>

Пример Widged:

чат /meta.wjs:

{
    "uid"       : "SockIoChat",
    "singleton" : true,
    "init"      : function() {
        console.log("debug:");
        console.log(this.url);
//        $.loadCSS('style.css');
        this.dom.load(this.url+"/chat.html")
    }
}

чат / chat.html:

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

Answer 1

Просто загрузите его, как только закончите с ленивой загрузкой в ​​качестве обратного вызова или чего-то еще, или используйте функцию setTimeout для его инициализации.

Answer 2

Это можно сделать с помощью addWidget или же makeWidget Функции, найденные здесь в документации:

https://github.com/troolee/gridstack.js/tree/develop/doc#addwidgetel-xy-width-height-autoposition-minwidth-maxwidth-minheight-maxheight-id

https://github.com/troolee/gridstack.js/tree/develop/doc

makeWidget используется, если вы хотите преобразовать существующий элемент в элемент сетки, тогда как addWidget создаст элемент, а также сделает его виджетом.