javascript gridstack framework lazyloading

Question

Hy Gridstackを使用して、幅の広いページを作成したいと考えています。 私の問題は、私が "怠惰な"ロードウィジェットをするとき、グリッドスタックはこの新しいDOMノードを初期化しないということです。 （彼らは動かない）私はこのことをどうやって説明することができるか？ 私の問題は$（ '。grid-stack'）だと思います。gridstack（options）; https://github.com/troolee/gridstack.js/blob/master/src/gridstack.js#L1727

既に「遅延」ロードを認識しているフレームワークがありますか？

のindex.html：Widgedの

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

例：

チャット/ 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

コールバックとしてlazyloadingをしたら、ロードしてくださいackなどを使用するか、setTimeout関数を使用して初期化します。

Answer 2

これは、マニュアルでここで見つけるaddWidgetまたはmakeWidget機能を使用して行うことができます：あなたはgridstack要素に既存の要素を変換したい場合は

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

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

makeWidgetが使用されています一方、addWidgetは要素を作成し、それをウィジェットにします。