Skip to content

Meteor sorting oddity... #287

@Siyfion

Description

@Siyfion

So I have the following code in my template and corresponding javascript. My issue is that it seems that after moving a productField to a new position in the list, the update is sent to the server, which causes the DOM to reload, then Sortable "remembers" the change that was made and almost re-applies it. Causing the ordering on screen to be wrong. ie. the productFields aren't in index order.

Is there a way I can "reset" the Sortable internal state back to "unsorted"?

Or is there a better way to achieve this!?

...
          <ul class="list-group" id="selected-fields">
            {{#each productFieldDefinitions}}
              <li class="list-group-item">
                {{displayName}}
                <span class="badge">
                  <i class="fa fa-bars drag-handle"></i>
                </span>
              </li>
            {{/each}}
          </ul>
...
  var el = document.getElementById('selected-fields');
  Sortable.create(el, {
    group: {
      name: "fields",
      pull: false,
      put: true
    },
    sort: true,
    handle: '.drag-handle',
    draggable: '.list-group-item',
    onUpdate: function (event) {
      var productField = Blaze.getData(event.item);
      var orderedFields = _.sortBy(instance.data.category.productFields, 'index');

      // Remove the field from it's old position
      orderedFields.splice(event.oldIndex, 1);

      // Do we now need to shift the new index?
      var newIndex = event.newIndex;
      if (event.oldIndex < event.newIndex) {
        newIndex--;
      }

      // Insert the field into it's new position
      orderedFields.splice(newIndex, 0, productField);

      // Re-index the array
      _.each(orderedFields, function (field, index) {
        field.index = index;
      });

      // Save the update to the server
      ProductCategories.update({
        _id: instance.data.category._id
      }, {
        $set: { productFields: instance.data.category.productFields } 
      }, function (error, result) {
        if (!!error) {
          console.log(error);
          return;
        }
      });
    }
  });

Template.categoryEditor.helpers({
  productFieldDefinitions: function () {
    return _.sortBy(Template.instance().data.category.productFields, 'index') || [];
  }
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions