0
부트 스트랩 패널 그룹을 아코디언으로 사용하는 동안 관찰 가능한 배열을 표시하는 데 문제가 있습니다. 그러나 SortOrder 값으로 정렬하여 정렬되지 않은 목록으로 표시 될 때 동일한 목록이 올바르게 표시됩니다. 정렬 단추는 서버에서 반환 된 데이터를 시뮬레이트하는 데 사용되며 수동으로 패널을 정렬하지 않고이 단추를 누르면 예상대로 목록 업데이트가 수행됩니다. 패널을 수동으로 정렬하면 정렬 버튼을 누른 후에 패널이 더 이상 올바르게 정렬되지 않지만 정렬되지 않은 목록은 계속 정확하게 정렬됩니다.Observable Array 녹아웃으로 문제 정렬
수동 정렬 후에 부트 스트랩 패널이 올바르게 표시되지 않도록 내가 잘못하고있는 것에 대한 제안 사항이 있습니까? 다음
$(function() {
ko.applyBindings(new schedulerViewModel(new ViewModel()));
});
function Group(id, sortOrder, name) {
var self = this;
self.id = ko.observable(id);
self.sortOrder = ko.observable(sortOrder);
self.name = ko.observable(name);
};
function ViewModel() {
var self = this;
self.groups = ko.observableArray([
new Group(3, 0, 'System Group'),
new Group(27, 1, 'New Group Added'),
new Group(1, 2, 'Group A'),
new Group(2, 3, 'Group B')
]);
};
ko.bindingHandlers.uiSortableList = {
init: function(element, valueAccessor, allBindingAccessor, context) {
var $element = $(element),
list = valueAccessor();
$element.sortable({
axis: 'y',
handle: '#panel-handle',
stop: function(event, ui) {
var newIdOrder = $(this).sortable('toArray');
context.updateWorkgroupsSortOrder(newIdOrder);
context.sortWorkgroups();
}
});
}
};
function schedulerViewModel(viewModel) {
var self = this;
self.comments = ko.observableArray([]);
self.workgroups = ko.observableArray(viewModel.groups());
self.sortWorkgroups = function() {
self.workgroups.sort(function(a, b) {
var aSortOrder = a.sortOrder(),
bSortOrder = b.sortOrder(),
result = 0;
result = parseInt(aSortOrder) - parseInt(bSortOrder);
return result;
});
};
self.count = ko.observable(0);
self.sortButton = function() {
var array;
self.count(Math.floor((Math.random() * 10)));
if (self.count() == 0) {
array = [27, 2, 3, 1];
} else if (self.count() == 1) {
array = [3, 27, 1, 2];
} else if (self.count() == 2) {
array = [1, 3, 2, 27];
} else if (self.count() == 3) {
array = [3, 2, 27, 1];
} else if (self.count() == 4) {
array = [2, 1, 27, 3];
} else if (self.count() == 5) {
array = [1, 27, 3, 2];
} else if (self.count() == 6) {
array = [2, 3, 1, 27];
} else if (self.count() == 7) {
array = [27, 1, 3, 2];
} else if (self.count() == 8) {
array = [3, 1, 27, 2];
} else if (self.count() == 9) {
array = [1, 2, 27, 3];
} else {
array = [27, 3, 2, 1];
}
self.updateWorkgroupsSortOrder(array);
self.sortWorkgroups();
};
self.updateWorkgroupsSortOrder = function(workgroupIds) {
self.comments.push(workgroupIds);
for (var i = 0; i < workgroupIds.length; i++) {
var id = workgroupIds[i];
var workgroup = ko.utils.arrayFirst(this.workgroups(), function(item) {
return item.id() == id;
});
workgroup.sortOrder(i);
}
};
};#panel-handle{
float:left;
clear:both;
position:relative;
display:inline-block;
top:0;
left:0;
color:gray;
height: 37px;
background-color:#f5f5f5;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
border-right:solid 1px #ddd;
cursor:move;
margin-right:8px;
}
#panel-handle i{
padding: 11px 4px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>
<button type="button" data-bind="click: sortButton">Sort (<span data-bind="text: count"></span>)</button>
</div>
<ul data-bind="foreach: workgroups, uiSortableList: workgroups">
<li><span data-bind="text: name() + ' - '"></span><span data-bind="text: sortOrder()"></span></li>
</ul>
<div id="content" class="col-xs-9 col-md-10">
<div class="panel-group" id="accordion" data-bind="foreach: workgroups, uiSortableList: workgroups">
<div data-bind="attr:{id: id() }" class="panel panel-default">
<span id="panel-handle">
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
</span>
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-bind="attr:{href: '#work-group-' + id()}">
<h4 class="panel-title">
<span data-bind="text: name()"></span>
<span data-bind="text: '(Id) ' + id()"></span>
<span data-bind="text: ' - (SortOrder) ' + sortOrder()"></span>
</h4>
</div>
</div>
</div>
<div data-bind="foreach: comments, visible: comments().length > 0">
<div><span data-bind="text: $data"></span></div>
</div>
</div>