update demo
This commit is contained in:
parent
31c3eb494e
commit
1527485f75
|
@ -68,18 +68,19 @@
|
|||
|
||||
this.grid = $('.grid-stack').data('gridstack');
|
||||
|
||||
this.add_new_widget = function () {
|
||||
this.addNewWidget = function () {
|
||||
var node = this.items.pop() || {
|
||||
x: 12 * Math.random(),
|
||||
y: 5 * Math.random(),
|
||||
width: 1 + 3 * Math.random(),
|
||||
height: 1 + 3 * Math.random()
|
||||
};
|
||||
this.grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
|
||||
this.grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
|
||||
node.x, node.y, node.width, node.height);
|
||||
return false;
|
||||
}.bind(this);
|
||||
|
||||
$('#add-new-widget').click(this.add_new_widget);
|
||||
$('#add-new-widget').click(this.addNewWidget);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -38,7 +38,7 @@
|
|||
<h1>knockout.js Demo</h1>
|
||||
|
||||
<div>
|
||||
<button data-bind="click: add_new_widget">Add new widget</button>
|
||||
<button data-bind="click: addNewWidget">Add new widget</button>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
@ -64,9 +64,9 @@
|
|||
}
|
||||
|
||||
var item = _.find(items, function (i) { return i.nodeType == 1 });
|
||||
grid.add_widget(item);
|
||||
grid.addWidget(item);
|
||||
ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
|
||||
grid.remove_widget(item);
|
||||
grid.removeWidget(item);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
@ -78,7 +78,7 @@
|
|||
[
|
||||
'<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
|
||||
' <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
|
||||
' <div class="grid-stack-item-content"><button data-bind="click: $root.delete_widget">Delete me</button></div>',
|
||||
' <div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>',
|
||||
' </div>',
|
||||
'</div> '
|
||||
].join('')
|
||||
|
@ -90,7 +90,7 @@
|
|||
|
||||
this.widgets = ko.observableArray(widgets);
|
||||
|
||||
this.add_new_widget = function () {
|
||||
this.addNewWidget = function () {
|
||||
this.widgets.push({
|
||||
x: 0,
|
||||
y: 0,
|
||||
|
@ -98,10 +98,12 @@
|
|||
height: Math.floor(1 + 3 * Math.random()),
|
||||
auto_position: true
|
||||
});
|
||||
return false;
|
||||
};
|
||||
|
||||
this.delete_widget = function (item) {
|
||||
this.deleteWidget = function (item) {
|
||||
self.widgets.remove(item);
|
||||
return false;
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -38,7 +38,7 @@
|
|||
<h1>knockout.js Demo</h1>
|
||||
|
||||
<div>
|
||||
<button data-bind="click: add_new_widget">Add new widget</button>
|
||||
<button data-bind="click: addNewWidget">Add new widget</button>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
@ -64,9 +64,9 @@
|
|||
}
|
||||
|
||||
var item = _.find(items, function (i) { return i.nodeType == 1 });
|
||||
grid.add_widget(item);
|
||||
grid.addWidget(item);
|
||||
ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
|
||||
grid.remove_widget(item);
|
||||
grid.removeWidget(item);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
@ -83,7 +83,7 @@
|
|||
|
||||
this.widgets = ko.observableArray(widgets);
|
||||
|
||||
this.add_new_widget = function () {
|
||||
this.addNewWidget = function () {
|
||||
this.widgets.push({
|
||||
x: 0,
|
||||
y: 0,
|
||||
|
@ -91,10 +91,12 @@
|
|||
height: Math.floor(1 + 3 * Math.random()),
|
||||
auto_position: true
|
||||
});
|
||||
return false;
|
||||
};
|
||||
|
||||
this.delete_widget = function (item) {
|
||||
this.deleteWidget = function (item) {
|
||||
self.widgets.remove(item);
|
||||
return false;
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -113,7 +115,7 @@
|
|||
<template id="gridstack-template">
|
||||
<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">
|
||||
<div class="grid-stack-item" data-bind="attr: {'data-gs-x': $data.x, 'data-gs-y': $data.y, 'data-gs-width': $data.width, 'data-gs-height': $data.height, 'data-gs-auto-position': $data.auto_position}">
|
||||
<div class="grid-stack-item-content"><button data-bind="click: $root.delete_widget">Delete me</button></div>
|
||||
<div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>
|
||||
</div></div><!-- <---- NO SPACE BETWEEN THESE CLOSING TAGS -->
|
||||
</template>
|
||||
</body>
|
||||
|
|
|
@ -60,7 +60,7 @@
|
|||
$('.grid-stack').gridstack(options);
|
||||
|
||||
new function () {
|
||||
this.serialized_data = [
|
||||
this.serializedData = [
|
||||
{x: 0, y: 0, width: 2, height: 2},
|
||||
{x: 3, y: 1, width: 1, height: 2},
|
||||
{x: 4, y: 1, width: 1, height: 1},
|
||||
|
@ -73,17 +73,18 @@
|
|||
|
||||
this.grid = $('.grid-stack').data('gridstack');
|
||||
|
||||
this.load_grid = function () {
|
||||
this.grid.remove_all();
|
||||
var items = GridStackUI.Utils.sort(this.serialized_data);
|
||||
this.loadGrid = function () {
|
||||
this.grid.removeAll();
|
||||
var items = GridStackUI.Utils.sort(this.serializedData);
|
||||
_.each(items, function (node) {
|
||||
this.grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
|
||||
this.grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
|
||||
node.x, node.y, node.width, node.height);
|
||||
}, this);
|
||||
return false;
|
||||
}.bind(this);
|
||||
|
||||
this.save_grid = function () {
|
||||
this.serialized_data = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
|
||||
this.saveGrid = function () {
|
||||
this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
|
||||
el = $(el);
|
||||
var node = el.data('_gridstack_node');
|
||||
return {
|
||||
|
@ -93,18 +94,20 @@
|
|||
height: node.height
|
||||
};
|
||||
}, this);
|
||||
$('#saved-data').val(JSON.stringify(this.serialized_data, null, ' '));
|
||||
$('#saved-data').val(JSON.stringify(this.serializedData, null, ' '));
|
||||
return false;
|
||||
}.bind(this);
|
||||
|
||||
this.clear_grid = function () {
|
||||
this.grid.remove_all();
|
||||
this.clearGrid = function () {
|
||||
this.grid.removeAll();
|
||||
return false;
|
||||
}.bind(this);
|
||||
|
||||
$('#save-grid').click(this.save_grid);
|
||||
$('#load-grid').click(this.load_grid);
|
||||
$('#clear-grid').click(this.clear_grid);
|
||||
$('#save-grid').click(this.saveGrid);
|
||||
$('#load-grid').click(this.loadGrid);
|
||||
$('#clear-grid').click(this.clearGrid);
|
||||
|
||||
this.load_grid();
|
||||
this.loadGrid();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -75,7 +75,7 @@
|
|||
var grid = $(this).data('gridstack');
|
||||
|
||||
_.each(items, function (node) {
|
||||
grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
|
||||
grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
|
||||
node.x, node.y, node.width, node.height);
|
||||
}, this);
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue