添加新小部件后无法移动Gridstack小部件

Question

使用RactiveJS，Redux和Gridstack制作应用程序。

当新的小部件被添加时，一切正常，小部件也可移动/可调整大小。但是，当我删除所有小部件并添加，例如，两个新的，然后：

1. 部件无法移动，无法调整大小。如图：
2. 当试图删除它的小部件消失，但其他小部件改变他们的位置。

jsFiddle is provided as follows

你可以看到正确的部件被移到右侧，但办理停留在哪里。那么为什么是这样的行为，如何处理那？

RactiveJS应用程序由三个部分组成

DashboardComponent 
WidgetGridComponent 
WidgetComponent 

法典规定如下：

var Widget = Ractive.extend({ 
    isolated: false, // To pass events to WidgetGrid component (makeWidget, removeWidget, etc.) 
    template: '#widgetTemplate', 
    components: {}, 
    oninit: function() { 
     // Load data to widget 
    }, 
    oncomplete: function() { 
     this.drawChart(); 
    }, 

    drawChart: function() { 
     var self = this; 

     function exampleData() { 
      return [{ 
        "label": "One", 
        "value": 29.765957771107 
       }, 
       { 
        "label": "Two", 
        "value": 0 
       }, 
       { 
        "label": "Three", 
        "value": 32.807804682612 
       }, 
       { 
        "label": "Four", 
        "value": 196.45946739256 
       }, 
       { 
        "label": "Five", 
        "value": 0.19434030906893 
       }, 
       { 
        "label": "Six", 
        "value": 98.079782601442 
       }, 
       { 
        "label": "Seven", 
        "value": 13.925743130903 
       }, 
       { 
        "label": "Eight", 
        "value": 5.1387322875705 
       } 
      ]; 
     } 
     nv.addGraph(function() { 
      var chart = nv.models.pieChart() 
       .x(function(d) { 
        return d.label 
       }) 
       .y(function(d) { 
        return d.value 
       }) 
       .showLabels(true); 

      d3.select("#widget" + self.get("id") + " svg") 
       .datum(exampleData()) 
       .transition().duration(350) 
       .call(chart); 

      return chart; 
     }); 

    }, 

    data: function() { 
     return { 
      id: null, 
      x: null, 
      y: null, 
      width: null, 
      height: null, 
     } 
    } 
}); 

var WidgetGrid = Ractive.extend({ 
    // isolated:false, 
    // twoway:false, 

    template: '#widgetGridTemplate', 
    components: { 
     Widget: Widget, 
    }, 
    onrender: function() { 
     // Init gridstack instance 
     this.bindGridstack(); 
    }, 

    deleteWidget: function(id) { 
     Action.deleteWidget(id); 
    }, 

    removeWidget: function(id) { 
     $(".grid-stack").data("gridstack").removeWidget("#widget" + id); 
    }, 

    createWidget: function(id) { 
     $(".grid-stack").data("gridstack").makeWidget("#widget" + id); 
    }, 

    updateWidgetSize: function(id, width, height) { 
     Action.updateWidgetSize(id, width, height); 
    }, 
    updateWidgetPosition: function(id, x, y) { 
     Action.updateWidgetPosition(id, x, y); 
    }, 

    bindGridstack: function() { 
     var self = this; 
     var options = { 
      animate: true, 
      auto: false, // if false gridstack will not initialize existing items (default: true) 
      float: true, // enable floating widgets (default: false) 
      disableOneColumnMode: true, 
      width: 10, // amount of columns (default: 12) 
      height: 10, // maximum rows amount. Default is 0 which means no maximum rows 
      // height: 10, 
      // cellHeight: 80, 
      disableResize: false, 
      disableDrag: false, 
      verticalMargin: 0, 
      resizable: { 
       handles: 'se' 
      } 
     }; 
     var grid = $(".grid-stack").gridstack(options); 

     // On user ends resizing 
     grid.on('gsresizestop', function(event, elem) { 
      var $el = $(elem); 
      var node = $el.data('_gridstack_node'); 
      var id = node.el.attr("id").replace("widget", ""); 

      self.updateWidgetSize(id, node.width, node.height, node.el.css("width"), node.el.css("height")); 
     }); 

     // On user ends dragging 
     grid.on('dragstop', function(event, ui) { 
      var $el = $(event.target); 
      var node = $el.data('_gridstack_node'); 
      var id = $el.attr("id").replace("ar-widget", ""); 

      self.updateWidgetPosition(id, node.x, node.y); 
     }); 
    }, 

    data: function() { 
     return { 
      widgets: [], 
     } 
    } 
}); 

var Dashboard = Ractive.extend({ 
    el: '#dashboard', //document.body, 
    template: '#dashboardTemplate', 
    isolated: true, 
    append: false, 
    oninit: function() { 
     this.on("add", function() { 
      Action.addWidget() 
     }); 
    }, 
    components: { 
     WidgetGrid: WidgetGrid, 
    }, 
    data: function() { 
     return { 
      store: {} 
     } 
    } 
}); 

Answer 1

有几个问题有：

• detach unrendering组件时不叫。只有在调用时才会调用它。您的网格不知道该小部件的删除。在Ractive将这些小部件元素解除封闭之后，这会导致网格出现怪异现象。

• 另一方面，grid.removeWidget()从DOM中删除小部件。状态改变之后，Ractive仍会尝试放弃。但由于元素不再存在，并且由于Ractive不知道小部件的移除，它将导致双重移除。

• 状态更改后，小部件的数据不再存在。 id已经是undefined。当您处理teardown，unrender和destruct事件时，您不能再使用id。您必须提前断开小部件与网格的连接，最好在状态更改前断开。

理想情况下，你应该让Ractive做元素的渲染/ unrendering，只告知gridstack有关使/从电网断开连接部件。您已使用makeWidget而不是addWidget来渲染。对于删除，你只需要做同样的事情。 removeWidget接受第二个参数，如果false将从网格中取消关联小部件但不从DOM中移除该元素。这在状态改变之后不会让Ractive失望。

下面是一个例子：https://jsfiddle.net/fm133mk6/