0
我在使用引导面板组作为手风琴时显示可观察数组的问题，但是当显示为无序列表时，同样的列表正确显示，按SortOrder值进行排序。排序按钮用于模拟从服务器返回的数据，并且无需手动排序任何面板，您可以按此按钮并按预期更新这两个列表。一旦您手动对面板进行排序，按下排序按钮后面板将不再正确排序，但无序列表会继续正确排序。可观察数组排序问题与敲除
关于我在做什么的错误的任何建议是防止自动排序后正确显示引导面板？
$(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>