Jak zamienić dwa elementy na observableArray?

Question

Mam przycisk, który przenosi pozycję o jedną pozycję w lewo w obserwowalną tablicę. Robię to w następujący sposób. Jednak wadą jest to, że category() [index] zostaje usunięty z tablicy, odrzucając w ten sposób wszelkie manipulacje DOM (przez walidację jQuery w moim przypadku) w tym węźle.

Czy istnieje sposób wymiany dwóch elementów bez użycia zmiennej tymczasowej, aby zachować węzeł 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

Oto moja wersja moveUp że robi swap w jednym kroku:

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

To nadal nie rozwiązuje problemu , ponieważ Knockout nadal będzie widzieć swap jako usuwanie i dodawanie akcji. Jest jednak open issue dla Knockout do obsługi ruchomych przedmiotów. Aktualizacja: W wersji 2.2.0 Knockout rozpoznaje przeniesione elementy, a powiązanie foreach nie spowoduje ich ponownego renderowania.

Answer 2

miałem podobny problem jak chciałem jQuery przeciągnij & kroplę na moich przedmiotów. Moim rozwiązaniem stało się użycie szablonów knockoutjs do wiązania zdarzeń beforeRemove i afterAdd z modelem. Funkcja Person Class/jest również prostym modelem widoku nokaut.

W poniższym przykładzie używam .draggable(), ale można łatwo użyć sprawdzania poprawności. Dodaj własny kod do manipulowania obserwowalną tablicą i powinieneś być dobry.

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> 

ViewModel:

Answer 3

dzięki Michael Best dla swojej wersji moveUp

moja wersja moveDown

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

Answer 4

wiem ta odpowiedź przychodzi trochę późno, ale pomyślałem, że może to być przydatne dla innych, którzy chcą bardziej ogólnego rozwiązanie wymiany. Można dodać funkcję wymiany do observableArrays tak:

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

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

    this.valueHasMutated(); 
} 

Następnie można użyć tej funkcji, aby zamienić dwa elementy w tablicy podane ich indeksach:

myArray.swap(index1, index2); 

Dla funkcji moveUp, można następnie wykonaj coś takiego:

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