René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Gridstack on Meteor","articleBody":"Hi @troolee,\nThx for this library! Totally awesome.\nI just worked out how to use gridstack on Meteor. I have implemented persistent edits, which stores the grid tile properties in a Mongo collection. I have to say, it's pretty cool!\n\nBelow is the code I've used. \n\nAdd existing smart package from atmospherejs.com (https://atmospherejs.com/tarzak/gridstackjs) -- I'm trying to find out if the author will publish their package code onto GitHub.\n\n```\nmeteor create myApp\ncd myApp\nmeteor add tarzak:gridstackjs\n```\n\nHTML:\n\n``` html\n\u003c!-- myApp.html --\u003e\n\u003cbody\u003e\n{{\u003e gridstack}}\n\u003c/body\u003e\n\u003ctemplate name=\"gridstack\"\u003e\n \u003cdiv class=\"grid-stack\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n```\n\nShared client/server JavaScript to create a Mongo collection\n\n``` javascript\n// myApp.js\nGridTiles = new Mongo.Collection(\"gridTiles\");\n/* GridTiles.insert({\n _id: \"abcd\", // mongoId \n x: 0,\n y: 1,\n width: 2,\n height: 2\n}); */\n```\n\nClient JavaScript\n\n``` javascript\n// client/myGridstack.js\nTemplate.gridstack.rendered = function () {\n var gridstackOptions = {};\n Tracker.autorun(function () {\n  var gridTiles = GridTiles.find().fetch();\n  var grid = $('.grid-stack').gridstack(gridstackOptions).data('gridstack');\n  grid.remove_all();\n  _.each(gridTiles, function (tile) {\n   var widgetElement = $('\u003cdiv\u003e\u003cdiv class=\"grid-stack-item-content\" /\u003e\u003cdiv/\u003e')\n   if(widgetElement)    {\n    grid.add_widget(widgetElement, tile.x, tile.y, tile.width, tile.height);\n    widgetElement.attr('data-custom-id', tile._id);\n   }\n  });\n }); // End autorun\n // Define onchange to update Mongo collection\n $('.grid-stack').on('change', function (event, items) {\n  _.each(items, function (item) {\n   var attributes = item.el.data();\n   GridTiles.update({_id:attributes.customId},\n   {x:attributes.gsX,y:attributes.gsY,height:attributes.gsHeight, width:attributes.gsWidth});\n  });\n });\n};      \n```\n\nThat's it! =-) \nNew tiles can be added on the fly (i.e., reactively) just by inserting into the Mongo collection. When you move or resize the tiles, the new locations are saved. The \"bindings\" are already hooked up because of the `Tracker.autorun()` function.\n\nThe Meteor community is building procedures for libraries like Gridstack.js to have \"official\" integrations with Meteor (i.e., sponsored by the official maintainers). If you're open to this, I can try to help with the set-up as well as add documentation.\n","author":{"url":"https://github.com/jonlachlan","@type":"Person","name":"jonlachlan"},"datePublished":"2015-02-25T20:02:34.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":12},"url":"https://github.com/77/gridstack.js/issues/77"}