{"action":"created","issue":{"url":"https://api.github.com/repos/troolee/gridstack.js/issues/56","labels_url":"https://api.github.com/repos/troolee/gridstack.js/issues/56/labels{/name}","comments_url":"https://api.github.com/repos/troolee/gridstack.js/issues/56/comments","events_url":"https://api.github.com/repos/troolee/gridstack.js/issues/56/events","html_url":"https://github.com/troolee/gridstack.js/issues/56","id":56271213,"number":56,"title":"Creating Gridstack Custom Binding with Knockout JS","user":{"login":"ascendantofrain","id":781671,"avatar_url":"https://avatars.githubusercontent.com/u/781671?v=3","gravatar_id":"","url":"https://api.github.com/users/ascendantofrain","html_url":"https://github.com/ascendantofrain","followers_url":"https://api.github.com/users/ascendantofrain/followers","following_url":"https://api.github.com/users/ascendantofrain/following{/other_user}","gists_url":"https://api.github.com/users/ascendantofrain/gists{/gist_id}","starred_url":"https://api.github.com/users/ascendantofrain/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ascendantofrain/subscriptions","organizations_url":"https://api.github.com/users/ascendantofrain/orgs","repos_url":"https://api.github.com/users/ascendantofrain/repos","events_url":"https://api.github.com/users/ascendantofrain/events{/privacy}","received_events_url":"https://api.github.com/users/ascendantofrain/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-02-02T18:06:58Z","updated_at":"2015-02-02T18:18:56Z","closed_at":null,"body":"Is it possible to push a new grid item to an array and then rebuild the gridstack grid after the update??  My view has a button that pushes 'default' grid item information to an array and then appends it to the grid in the view.  Any advice on how I can achieve my desired results??\r\n\r\n    <div class=\"grid-stack\" data-bind=\"foreach: tiles, gridstack: { tiles: tiles }\">\r\n        <div class=\"grid-stack-item\" data-bind=\"attr: { 'data-gs-x': rect.x - 1, 'data-gs-y': rect.y - 1, 'data-gs-width': rect.width, 'data-gs-height': rect.height, 'data-gs-min-height': rect.minHeight, 'data-gs-max-height': rect.maxHeight, 'data-gs-min-width': rect.minWidth, 'data-gs-max-width': rect.maxWidth }\">\r\n            <div class=\"grid-stack-item-content\">\r\n                <h3 data-bind=\"text: title\"></h3>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    ko.bindingHandlers.gridstack = {\r\n        buildGrid: function(element, valueAccessor) {\r\n            var gridstackWidth = $('.grid-stack').width(),\r\n                widgetWidth = (gridstackWidth / 5) - 23,\r\n                widgetHeight = widgetWidth / 2.5,\r\n                reflow = function () {\r\n                    $.each(Highcharts.charts, function () {\r\n                        this.reflow();\r\n                    });\r\n                },\r\n                gsOptions = {\r\n                    always_show_resize_hande: true,\r\n                    cell_height: widgetHeight,\r\n                    handle: '.editing-options .handle',\r\n                    vertical_margin: 5\r\n                },\r\n                gridstack = function () {\r\n                    $(element).gridstack(gsOptions);\r\n                    $(element).on('change', function(event, ui) {\r\n                        reflow();\r\n                    });\r\n                };\r\n\r\n            gridstack();\r\n        },\r\n        init: function (element, valueAccessor) {\r\n            var options = ko.unwrap(valueAccessor()); // create subscription?\r\n            ko.bindingHandlers.gridstack.buildGrid(element);\r\n        },\r\n        update : function(element, valueAccessor) {\r\n            var opts = ko.unwrap(valueAccessor()),\r\n                tiles = ko.unwrap(opts.tiles);\r\n\r\n            ko.bindingHandlers.gridstack.buildGrid(element);\r\n\r\n        }\r\n    };"},"comment":{"url":"https://api.github.com/repos/troolee/gridstack.js/issues/comments/72508189","html_url":"https://github.com/troolee/gridstack.js/issues/56#issuecomment-72508189","issue_url":"https://api.github.com/repos/troolee/gridstack.js/issues/56","id":72508189,"user":{"login":"troolee","id":137888,"avatar_url":"https://avatars.githubusercontent.com/u/137888?v=3","gravatar_id":"","url":"https://api.github.com/users/troolee","html_url":"https://github.com/troolee","followers_url":"https://api.github.com/users/troolee/followers","following_url":"https://api.github.com/users/troolee/following{/other_user}","gists_url":"https://api.github.com/users/troolee/gists{/gist_id}","starred_url":"https://api.github.com/users/troolee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/troolee/subscriptions","organizations_url":"https://api.github.com/users/troolee/orgs","repos_url":"https://api.github.com/users/troolee/repos","events_url":"https://api.github.com/users/troolee/events{/privacy}","received_events_url":"https://api.github.com/users/troolee/received_events","type":"User","site_admin":false},"created_at":"2015-02-02T18:18:56Z","updated_at":"2015-02-02T18:18:56Z","body":"Here is a working sample of usage with knockout.js http://troolee.github.io/gridstack.js/demo/knockout.html\r\n\r\nThis is how I use it."}}