如何交换两个项目在observableArray？(How do I swap two items

我有一个按钮，向左移动在observableArray项目之一的地位。 我这样做的以下方式。 然而，缺点在于，类别（）[指数]获取从阵列中移除，从而在该节点上丢弃任何DOM操作（由jQuery验证在我的情况）。

有没有一种方法来交换两个项目，而不使用一个临时变量，以保存DOM节点？

    moveUp: function (category) {
        var categories = viewModel.categories;
        var length = categories().length;
        var index = categories.indexOf(category);
        var insertIndex = (index + length - 1) % length;

        categories.splice(index, 1);
        categories.splice(insertIndex, 0, category);
        $categories.trigger("create");
    }

Answer 1:

这里是我的版本moveUp ，做一步到位交换：

moveUp: function(category) {
    var i = categories.indexOf(category);
    if (i >= 1) {
        var array = categories();
        categories.splice(i-1, 2, array[i], array[i-1]);
    }
}

这仍然不能解决问题，但是，因为淘汰赛仍然会看到交换的删除和添加操作。 还有一个悬而未决的问题进行淘汰赛，以支持移动的物品，虽然。 更新：自2.2.0版本，淘汰赛会识别移动的项目和foreach绑定将不会重新渲染它们。

Answer 2:

我知道这个答案来得有点晚了，但我认为这可能是别人谁想要一个更一般的解掉有用的。 您可以添加一个交换功能，以您的observableArrays像这样：

ko.observableArray.fn.swap = function(index1, index2) {
    this.valueWillMutate();

    var temp = this()[index1];
    this()[index1] = this()[index2];
    this()[index2] = temp;

    this.valueHasMutated();
}

然后，您可以使用此功能中给出其索引的数组来交换两个元素：

myArray.swap(index1, index2);

对于为moveUp功能，然后你可以做这样的事情：

moveUp: function(category) {
    var i = categories.indexOf(category);
    if (i > 0) {
        categories.swap(i, i+1);
    }
}

Answer 3:

我有一个类似的问题，因为我想在我的项目jQuery的拖放。 我的解决方案成为使用knockoutjs模板绑定beforeRemove和afterAdd事件模型。 Person类/功能也是简单的敲除视图模型。

在下面的例子中，我使用.draggable（），但你可以很容易地使用验证。 添加自己的代码，用于操纵observableArray，你应该是好去。

HTML：

<div data-bind="template: {foreach:attendeesToShow, beforeRemove:hideAttendee, afterAdd:showAttendee}">
    <div class="person">
        <img src="person.jpg" alt="" />
        <div  data-bind="text: firstName" ></div>
        <div class="deleteimg" data-bind="click:$parent.removeAttendee" title="Remove"></div>
    </div>
</div>

视图模型：

var ViewModel = function () {
    var self = this;
    var at = [new Person('First', 'Person', '[e-mail]'),
                    Person('Second', 'Person', '[e-mail]')
                ];
    self.attendees = ko.observableArray(at);

    self.removeAttendee = function (attendee) {
        self.attendees.remove(attendee);
    };

    this.showAttendee = function (elem) {
        if (elem.nodeType === 1) {
    $(elem).hide().show("slow").draggable();//Add jQuery functionality 
        }
    };
    this.hideAttendee = function (elem) {
        if (elem.nodeType === 1) {
            $(elem).hide(function () {
                $(elem).remove();
            });
        }
    };
};

ko.applyBindings(new ViewModel());

Answer 4:

感谢麦可思对他的版本前移的

我下移的版本

moveDown: function(category) {
    var array = categories();
    var i = categories.indexOf(category);
    if (i < arr.length) {
        categories.splice(i, 2, array[i + 1], array[i]);
    }
}

文章来源: How do I swap two items in an observableArray?