Question

我在使用bootstraps panel-group作为手风琴时显示可观察数组时遇到问题，但是当显示为无序列表时，相同列表会正确显示，按SortOrder值排序。排序按钮用于模拟从服务器返回的数据，无需手动排序任何面板，您可以按此按钮并按预期更新列表。手动对面板进行排序后，按下排序按钮后面板将不再正确排序，但无序列表会继续正确排序。

关于我做错了什么的建议阻止了手动排序后引导板正确显示？

＆＃13;

$(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);
    }
  };
};

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

解决方法是按如下方式修改可排序停止方法：

stop: function(event, ui) {
    var item = ko.dataFor(ui.item[0]);
    var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
    if (position >= 0) {
        list.remove(item);
        ui.item.remove();
        list.splice(position, 0, item);
    }
    var newIdOrder = $(this).sortable('toArray');
    context.updateWorkgroupsSortOrder(newIdOrder);
}

具有Knockout的可观察数组排序问题

1 个答案: