Skip to content

Commit 16be9c0

Browse files
RubaXaRubaXa
committed
+ example
1 parent 7857eda commit 16be9c0

File tree

1 file changed

+127
-0
lines changed

1 file changed

+127
-0
lines changed

‎example.html

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<meta charset="utf-8" />
6+
7+
<style>
8+
.grid {
9+
font-size: 0;
10+
}
11+
.col-1_2 {
12+
box-sizing:border-box;
13+
display: inline-block;
14+
padding: 0.5rem;
15+
font-size: 1rem;
16+
}
17+
.col-1_2 {
18+
width: 50%;
19+
}
20+
21+
.mirror {
22+
color: #ccc;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<div class="grid">
28+
<div class="col-1_2">
29+
<div class="grid">
30+
<div class="col-1_2">
31+
<h4>Sortable observable</h4>
32+
<ul data-bind="sortable: {foreach: sortableObservableItems}">
33+
<li data-bind="text: name"></li>
34+
</ul>
35+
</div>
36+
<div class="col-1_2 mirror">
37+
<h4>Sortable observable mirrored</h4>
38+
<ul data-bind="foreach: sortableObservableItems">
39+
<li data-bind="text: name"></li>
40+
</ul>
41+
</div>
42+
</div>
43+
</div>
44+
45+
<div class="col-1_2">
46+
<div class="grid">
47+
<div class="col-1_2">
48+
<h4>Sortable computed</h4>
49+
<ul data-bind="sortable: {foreach: sortableComputedItems, collection: underlayingSortableComputedItems}">
50+
<li data-bind="text: name"></li>
51+
</ul>
52+
</div>
53+
<div class="col-1_2 mirror">
54+
<h4>Sortable underlaying computed</h4>
55+
<ul data-bind="foreach: underlayingSortableComputedItems">
56+
<li data-bind="text: name"></li>
57+
</ul>
58+
</div>
59+
</div>
60+
</div>
61+
</div>
62+
63+
<div class="grid">
64+
<div class="col-1_2">
65+
<div class="grid">
66+
<div class="col-1_2">
67+
<h4>Draggable observable</h4>
68+
<ul data-bind="draggable: {foreach: draggableObservableItems}">
69+
<li data-bind="text: name"></li>
70+
</ul>
71+
</div>
72+
<div class="col-1_2 mirror">
73+
<h4>Draggable observable mirrored</h4>
74+
<ul data-bind="foreach: draggableObservableItems">
75+
<li data-bind="text: name"></li>
76+
</ul>
77+
</div>
78+
</div>
79+
</div>
80+
81+
<div class="col-1_2">
82+
<div class="grid">
83+
<div class="col-1_2">
84+
<h4>Draggable computed</h4>
85+
<ul data-bind="draggable: {foreach: draggableComputedItems, collection: underlayingDraggableComputedItems}">
86+
<li data-bind="text: name"></li>
87+
</ul>
88+
</div>
89+
<div class="col-1_2 mirror">
90+
<h4>Draggable computed mirrored</h4>
91+
<ul data-bind="foreach: draggableComputedItems">
92+
<li data-bind="text: name"></li>
93+
</ul>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
99+
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
100+
<script src="../Sortable.js"></script>
101+
<script src="../knockout-sortable.js"></script>
102+
<script>
103+
104+
var sortableComputedItems = [{ name: 'Sortable computed 1' }, { name: 'Filtered computed 2' }, { name: 'Sortable computed 3' }, { name: 'Filtered computed 4' }, { name: 'Sortable computed 5' }, { name: 'Filtered computed 6' }];
105+
var sortableObservableItems = [{ name: 'Sortable observable 1' }, { name: 'Sortable observable 2' }, { name: 'Sortable observable 3' }];
106+
107+
var draggableComputedItems = [{ name: 'Draggable computed 1' }, { name: 'Draggable computed 2' }, { name: 'Draggable computed 3' }];
108+
var draggableObservableItems = [{ name: 'Draggable observable 1' }, { name: 'Draggable observable 2' }, { name: 'Draggable observable 3' }];
109+
110+
var vm = {
111+
underlayingSortableComputedItems: ko.observableArray(sortableComputedItems),
112+
sortableObservableItems: ko.observableArray(sortableObservableItems),
113+
underlayingDraggableComputedItems: ko.observableArray(draggableComputedItems),
114+
draggableObservableItems: ko.observableArray(draggableObservableItems)
115+
}
116+
vm.sortableComputedItems = ko.computed(function () {
117+
return vm.underlayingSortableComputedItems()
118+
.filter(function (item) {
119+
return item.name.indexOf('Filtered') < 0;
120+
});
121+
});
122+
vm.draggableComputedItems = ko.computed(function () { return vm.underlayingDraggableComputedItems(); });
123+
124+
ko.applyBindings(vm);
125+
</script>
126+
</body>
127+
</html>

0 commit comments

Comments
 (0)