मैं एक अवलोकन योग्य में दो आइटम कैसे स्वैप कर सकता हूं?

Question

मेरे पास एक बटन है जो किसी आइटम को एक अवलोकन योग्य में छोड़ा जाता है। मैं इसे निम्नलिखित तरीके से कर रहा हूं। हालांकि, दोष यह है कि श्रेणियां() [अनुक्रमणिका] सरणी से हटा दी जाती है, इस प्रकार उस नोड पर जो भी डोम हेरफेर (मेरे मामले में jQuery सत्यापन द्वारा) को छोड़ देता है।

क्या कोई अस्थायी चर का उपयोग किए बिना दो आइटम स्वैप करने का कोई तरीका है ताकि डीओएम नोड को संरक्षित किया जा सके?

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]); 
    } 
} 

कि अभी भी समस्या का समाधान नहीं करता हालांकि, क्योंकि नॉकआउट अभी भी एक डिलीट के रूप में स्वैप को देखेगा और कार्रवाई जोड़ देगा। हालांकि, चलती वस्तुओं का समर्थन करने के लिए नॉकआउट के लिए open issue है। अद्यतन: संस्करण 2.2.0 के अनुसार, नॉकआउट स्थानांतरित वस्तुओं को पहचानता है और foreach बाइंडिंग उन्हें फिर से प्रस्तुत नहीं करेगा। moveup

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 2

मैं के रूप में मैं jQuery खींचें मेरे आइटम पर & ड्रॉप करना चाहता था एक ऐसी ही समस्या थी। मेरा समाधान पहले से हटाने और मॉडल के बाद घटनाओं को जोड़ने के लिए knockoutjs टेम्पलेट्स का उपयोग करने के लिए बन गया। पर्सन क्लास/फंक्शन भी एक साधारण नॉकआउट व्यू मॉडल है।

नीचे दिए गए उदाहरण में मैं .draggable() का उपयोग करता हूं, लेकिन आप आसानी से सत्यापन का उपयोग कर सकते हैं। अवलोकन योग्य में हेरफेर करने के लिए अपना कोड जोड़ें और आपको जाने के लिए अच्छा होना चाहिए।

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

धन्यवाद मैं इस सवाल का जवाब देर से एक सा आता है पता है, लेकिन मैंने सोचा कि यह दूसरों के लिए उपयोगी हो सकता है जो एक अधिक सामान्य चाहते स्वैप समाधान। तुम इतनी तरह अपने 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 4

की मेरी संस्करण के अपने संस्करण के लिए Michael Best को