Javascript Meteor中网格堆栈的绘制

我正在Meteor中使用gridstack.js

我有网格

<template name="grid">
  <div class="grid-stack" data-gs-width="12" data-gs-animate="yes">
    {{#each tiles}}
      {{> gridItem}}
    {{/each}}
  </div>
</template>

它可以正常工作，但是如果我先转到另一个路由，然后返回到带有网格的路由，gridstack功能将不再处于活动状态，但控制台不会说任何错误。如果我刷新，gridstack将再次正常工作。因此，只有当我回到这个页面而不刷新整个页面时，问题才会出现

我曾尝试将onRendered更改为onCreated，但当我刷新时，网格突然得到了完全相同的行为，即刷新页面时，或当我第一次转到另一个页面，然后使用网格返回页面时，网格堆栈都不工作

所以我想我还是应该使用onRendered，但当我在页面之间“浏览”时，Meteor的呈现方式似乎不一样。我是否应该在离开页面时取消初始化该库，以便在重新提交模板时它可以再次正确初始化

编辑 我试过了

Template.grid.onRendered(function() {
  var $el = $('.grid-stack');

  // destroy if already applied
  if ($el.data('gridstack')) {
    $el.data('gridstack').destroy();
  }

  // apply gridstak to grid element
  var grid = $el.gridstack();
});

而且

Template.grid.onDestroyed(function() {
  $('.grid-stack').data('gridstack').destroy();
});

但两者都不起作用

但是它说

TypeError: $(...).data(...).destroy is not a function

---

在AngularJS上实现Gridstack时，我遇到了同样的问题。页面更改会破坏网格堆栈。以下是我在控制器中解决问题的方法：

.controller('HomeCtrl', ['$scope', 'analyticsService', '$modal', '$timeout', function($scope, analyticsService, $modal, $timeout) {
    $scope.homeWidgets = [
        {sizeX: 6, sizeY: 5, row: 0, col:0, type: 'ndl-action-items'},
        {sizeX: 6, sizeY: 5, row: 0, col:7, type: 'ndl-stage-shift-graph'},
        {sizeX: 6, sizeY: 5, row: 1, col:0, type: 'ndl-nodules-in-system'},
        {sizeX: 6, sizeY: 5, row: 1, col:7, type: 'ndl-case-volume'}
    ];
    $scope.loadGrid = function() {
        if ($scope.homeGrid && $scope.homeGrid.destroy) {
            $scope.homeGrid.destroy();
        }
        var options = {
            cell_height: 70,
            vertical_margin: 10
        };
        // console.log("init grid");
        $scope.homeGrid = $('.grid-stack').gridstack(options);
        // console.log($scope.homeGrid);
    };
    $scope.$on('$viewContentLoaded', function(event) {
        $timeout($scope.loadGrid, 300);
        // event.preventDefault();
        /* Act on the event */
        // console.log('loaded');
        // $scope.loadGrid();
    });
}]);

---

因此，基本上当我的视图重新加载时，我会销毁网格对象（如果它存在），然后重新创建它。我必须使用timeout，以便在网格初始化之前加载DOM。

我尝试过在初始化之前销毁已初始化的if。我用代码编辑了我的问题

.controller('HomeCtrl', ['$scope', 'analyticsService', '$modal', '$timeout', function($scope, analyticsService, $modal, $timeout) {
    $scope.homeWidgets = [
        {sizeX: 6, sizeY: 5, row: 0, col:0, type: 'ndl-action-items'},
        {sizeX: 6, sizeY: 5, row: 0, col:7, type: 'ndl-stage-shift-graph'},
        {sizeX: 6, sizeY: 5, row: 1, col:0, type: 'ndl-nodules-in-system'},
        {sizeX: 6, sizeY: 5, row: 1, col:7, type: 'ndl-case-volume'}
    ];
    $scope.loadGrid = function() {
        if ($scope.homeGrid && $scope.homeGrid.destroy) {
            $scope.homeGrid.destroy();
        }
        var options = {
            cell_height: 70,
            vertical_margin: 10
        };
        // console.log("init grid");
        $scope.homeGrid = $('.grid-stack').gridstack(options);
        // console.log($scope.homeGrid);
    };
    $scope.$on('$viewContentLoaded', function(event) {
        $timeout($scope.loadGrid, 300);
        // event.preventDefault();
        /* Act on the event */
        // console.log('loaded');
        // $scope.loadGrid();
    });
}]);