playground
/
Sortable
mirror of https://github.com/RubaXa/Sortable.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Added knockout-sortable example/test

pull/652/head
Sebastian Rosengren 9 years ago
parent
01f1e47cbd
commit
4b9fc79dd9
1 changed files with 69 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 62
      knockout/example.html

62
knockout/example.html
Unescape View File

@ -17,9 +17,15 @@
.col-1_2 { .col-1_2 {
width: 50%; width: 50%;
} }
.mirror {
color: #ccc;
}
</style> </style>
</head> </head>
<body> <body>
<div class="grid">
<div class="col-1_2">
<div class="grid"> <div class="grid">
<div class="col-1_2"> <div class="col-1_2">
<h4>Sortable observable</h4> <h4>Sortable observable</h4>
@ -27,28 +33,68 @@
<li data-bind="text: name"></li> <li data-bind="text: name"></li>
</ul> </ul>
</div> </div>
<div class="col-1_2"> <div class="col-1_2 mirror">
<h4>Sortable observable mirrored</h4> <h4>Sortable observable mirrored</h4>
<ul data-bind="sortable: {foreach: sortableObservableItems}"> <ul data-bind="foreach: sortableObservableItems">
<li data-bind="text: name"></li> <li data-bind="text: name"></li>
</ul> </ul>
</div> </div>
</div> </div>
</div>
<div class="col-1_2">
<div class="grid"> <div class="grid">
<div class="col-1_2"> <div class="col-1_2">
<h4>Sortable computed</h4> <h4>Sortable computed</h4>
<ul data-bind="sortable: {foreach: sortableComputedItems, collection: underlayingsortableComputedItems}"> <ul data-bind="sortable: {foreach: sortableComputedItems, collection: underlayingSortableComputedItems}">
<li data-bind="text: name"></li> <li data-bind="text: name"></li>
</ul> </ul>
</div> </div>
<div class="col-1_2"> <div class="col-1_2 mirror">
<h4>Sortable computed mirrored</h4> <h4>Sortable computed mirrored</h4>
<ul data-bind="foreach: sortableComputedItems"> <ul data-bind="foreach: sortableComputedItems">
<li data-bind="text: name"></li> <li data-bind="text: name"></li>
</ul> </ul>
</div> </div>
</div> </div>
</div>
</div>
<div class="grid">
<div class="col-1_2">
<div class="grid">
<div class="col-1_2">
<h4>Draggable observable</h4>
<ul data-bind="draggable: {foreach: draggableObservableItems}">
<li data-bind="text: name"></li>
</ul>
</div>
<div class="col-1_2 mirror">
<h4>Draggable observable mirrored</h4>
<ul data-bind="foreach: draggableObservableItems">
<li data-bind="text: name"></li>
</ul>
</div>
</div>
</div>
<div class="col-1_2">
<div class="grid">
<div class="col-1_2">
<h4>Draggable computed</h4>
<ul data-bind="draggable: {foreach: draggableComputedItems, collection: underlayingDraggableComputedItems}">
<li data-bind="text: name"></li>
</ul>
</div>
<div class="col-1_2 mirror">
<h4>Draggable computed mirrored</h4>
<ul data-bind="foreach: draggableComputedItems">
<li data-bind="text: name"></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="../Sortable.js"></script> <script src="../Sortable.js"></script>
@ -58,11 +104,17 @@
var sortableComputedItems = [{ name: 'Sortable computed 1' }, { name: 'Sortable computed 2' }, { name: 'Sortable computed 3' }]; var sortableComputedItems = [{ name: 'Sortable computed 1' }, { name: 'Sortable computed 2' }, { name: 'Sortable computed 3' }];
var sortableObservableItems = [{ name: 'Sortable observable 1' }, { name: 'Sortable observable 2' }, { name: 'Sortable observable 3' }]; var sortableObservableItems = [{ name: 'Sortable observable 1' }, { name: 'Sortable observable 2' }, { name: 'Sortable observable 3' }];
var draggableComputedItems = [{ name: 'Draggable computed 1' }, { name: 'Draggable computed 2' }, { name: 'Draggable computed 3' }];
var draggableObservableItems = [{ name: 'Draggable observable 1' }, { name: 'Draggable observable 2' }, { name: 'Draggable observable 3' }];
var vm = { var vm = {
underlayingSortableComputedItems: ko.observableArray(sortableComputedItems), underlayingSortableComputedItems: ko.observableArray(sortableComputedItems),
sortableObservableItems: ko.observableArray(sortableObservableItems) sortableObservableItems: ko.observableArray(sortableObservableItems),
underlayingDraggableComputedItems: ko.observableArray(draggableComputedItems),
draggableObservableItems: ko.observableArray(draggableObservableItems)
} }
vm.sortableComputedItems = ko.computed(function () { return vm.underlayingSortableComputedItems(); }); vm.sortableComputedItems = ko.computed(function () { return vm.underlayingSortableComputedItems(); });
vm.draggableComputedItems = ko.computed(function () { return vm.underlayingDraggableComputedItems(); });
ko.applyBindings(vm); ko.applyBindings(vm);
</script> </script>

Write Preview
Loading…
Cancel
Save