流星渲染网格

Rendering gridstack in Meteor

本文关键字：网格 流星      更新时间：2023-09-26

我在Meteor中使用gridstack.js (https://github.com/troolee/gridstack.js)。

我有网格

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

和我应用gridstack到我的网格元素

Template.grid.onRendered(function() {
  $('.grid-stack').gridstack();
});

它正常工作，但如果我先转到另一条路由，然后带着网格返回到该路由，则gridstack功能不再"激活"(但控制台没有说任何错误)。如果我刷新，gridstack将再次正常工作。因此，只有当我不刷新整个页面而返回此页面时，才会出现此问题。

我已经尝试改变onRendered到onCreated，突然网格得到完全相同的行为，当我刷新，即网格堆栈不工作时刷新页面，也不是当我第一次去另一个页面，然后回到与网格的页面。

所以我想我应该仍然使用onRendered，但似乎流星不渲染相同的方式，当我"浏览"页面之间。我是否应该在离开页面时取消初始化库，以便在重新呈现模板时再次正确初始化库?

<标题>编辑

我试过了

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时遇到过同样的问题。页面更改打破了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。

相关文章：