नॉकआउट जेएस - पहले अवलोकन करने योग्य सरणी में आइटम जोड़ने के दौरान एनीमेशन हटाएं

Question

मुझे नॉकआउट जेएस के साथ समस्या है और सूची के रूप में एक अवलोकन योग्य सरणी प्रदर्शित करना; पहले से हटाए गए एनीमेशन चलते समय कोई आइटम जोड़ते समय, हटाए गए तत्व को एनीमेशन समाप्त होने तक इसकी स्थिति में रहने के बजाय सूची के नीचे ले जाया जाता है और तत्व हटा दिया जाता है। http://jsfiddle.net/bPP5Q/8/

किसी को भी पता है मैं यह कैसे हल कर सकते थे:

यहाँ समस्या थोड़ा बेहतर समझाने के लिए एक jsfiddle है?

जावास्क्रिप्ट:

jQuery(function ($) { 
    var ViewModel = function (data) { 
     var self = this; 
     self.data = ko.observableArray(data); 
     self.removeLine = function (elem) { 
      if (elem.nodeType === 1) $(elem).fadeOut(3000, function() { 
       $(elem).remove(); 
      }); 
     } 

     self.addLine = function (elem) { 
      if (elem.nodeType === 1) 
       $(elem).hide().fadeIn(3000); 
     } 

     self.removeItem = function() { 
      self.data.remove(function(item) { return item.test && item.test == 2; }); 
     } 

     self.addItem = function() { 
      self.data.splice(1, 0, { test: 9 }); 
     } 

     self.addremove = function() { 
      self.removeItem(); 
      var id = setInterval(function() { 
       self.addItem(); 
       clearInterval(id); 
      },1000); 
     } 
    } 

    var vm = new ViewModel([{ test: 9 }, { test: 2 }, { test: 1 }, { test: 1 }, { test: 1 }, { test: 1 }, { test: 1 }]); 

    ko.applyBindings(vm); 
}); 

HTML:

<button id="button" data-bind="click: addremove">Click</button> 
<table id="grid"> 
    <tbody data-bind='template: { foreach: data, afterAdd: addLine, beforeRemove: removeLine }'> 
     <tr> 
      <td data-bind="text: test"></td> 
      <td> 

      </td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

आप beforeAdd आइटम को निकालने के लिए बाध्य के रूप में शामिल तत्व को प्रदर्शित उपयोग कर सकते हैं

** संपादित करें **

यहां पहेली है: http://jsfiddle.net/janarde/U6Um5/5/

<button id="button" data-bind="click: addremove">Click</button> 
<table id="grid"> 
    <tbody data-bind='template: { foreach: data, afterAdd: addLine, beforeAdd: removeLine }'> 
     <tr> 
      <td data-bind="text: test"></td> 
      <td> 

      </td> 
     </tr> 
    </tbody> 
</table> 

Answer 2

अपने उदाहरण मुझे लगता है कि 3

self.removeItem(); 
var id = setInterval(function() { 
    self.addItem(); 
    clearInterval(id); 
},3000); 

http://jsfiddle.net/bPP5Q/15/

Answer 3

को 1 सेकंड के लिए आइटम जोड़ने के लिए समाधान के लिए केवल aumeti समय के रूप में उम्मीद है अद्यतन, यदि संभव हो तो, आप क्या करना चाहते एक ही ऑपरेशन में अवलोकन योग्य सरणी में आपके सभी परिवर्तन। उदाहरण के लिए, अलग-अलग तत्वों को जोड़ने और/या हटाने के बजाय, आप एक ही समय में संपूर्ण अवलोकन योग्य सरणी को अपडेट करना चाहते हैं, शायद ko.utils.arrayFilter का उपयोग करके अवलोकन करने योग्य के एक फ़िल्टर किए गए संस्करण को स्वयं को वापस करने के लिए।

self.data(ko.utils.arrayFilter(self.data(), function(x) { 
    return shouldKeepElement(x); 
})); 

यदि यह संभव नहीं है (जैसा कि शायद आप के लिए मामला है), तो आप सरणी में आइटम के जोड़ने देरी करने के लिए जब तक निकालने एनीमेशन पूरा हो गया है की आवश्यकता होगी। इसमें शायद "लीवर और पुली" की एक विस्तृत प्रणाली शामिल होगी, इसलिए परिणामस्वरूप कोड बहुत अवांछनीय होगा। उपयोगकर्ता अनुभव संभवतः पीड़ित होगा, क्योंकि "तेज़" उपयोगकर्ता कार्रवाइयों को कतारबद्ध या अस्वीकृत करने की आवश्यकता होगी।

स्पष्ट रूप से एक आदर्श समाधान यह है कि इसे नॉकआउट की अगली रिलीज में संबोधित किया जाता है। तब तक, आप या तो 2.1 डाउनग्रेड कर सकते हैं, या a small patch को मौजूदा नॉकआउट कोडबेस पर बना सकते हैं। मैं इस पैच के लिए झुकाव नहीं कर सकता, और इसमें अवांछित परिणाम हो सकते हैं, लेकिन यह इस समस्या के लिए एक अच्छा स्टॉप-गैप होना चाहिए।

Answer 4

समस्या addItem के समय के साथ है - आपको नई वस्तु जोड़ने की प्रक्रिया शुरू करने से पहले एनीमेशन समाप्त होने की प्रतीक्षा करनी होगी।

कार्य बेला: http://jsfiddle.net/bPP5Q/26/

jQuery(function ($) { 
// this runs after the window loads 
var ViewModel = function (data) { 
    var self = this; 
    self.data = ko.observableArray(data); 
    self.removeLine = function (elem) { 
     if (elem.nodeType === 1) $(elem).fadeOut(3000, function() { 
      $(elem).remove(); 
      self.addItem(); 
     }); 
    } 

    self.addLine = function (elem) { 
     if (elem.nodeType === 1) 
      $(elem).hide().fadeIn(3000); 
    } 

    self.removeItem = function() { 
     self.data.remove(function(item) { return item.test && item.test == 2; }); 
    } 

    self.addItem = function() { 
     self.data.splice(1, 0, { test: 9 }); 
    } 

    self.addremove = function() { 
     self.removeItem(); 
    } 
} 


var vm = new ViewModel([{ 
    test: 9 
}, { 
    test: 2 
}, { 
    test: 1 
}, { 
    test: 1 
}, { 
    test: 1 
}, { 
    test: 1 
}, { 
    test: 1 
}]); 

ko.applyBindings(vm); 

}); 

Answer 5

आपका समारोह "addItem" 1 सेकंड (setInterval 1000 एमएस) के बाद मार डाला है, इसलिए जबकि एनीमेशन fadeout पूरा नहीं हुआ है "self.data" एक नए तत्व शामिल हैं (जो 3000 एमएस की आवश्यकता है)। यह आपकी समस्या का पता लगाता है।

इस समस्या को हल करने के लिए आपको अपने "3000" के लिए "additem" के रूप में "fadeout" के समान अंतराल बनाना होगा। कोड हो जाता है:

jQuery(function ($) { 
    var ViewModel = function (data) { 
     var self = this; 
     self.data = ko.observableArray(data); 
     self.removeLine = function (elem) { 
      if (elem.nodeType === 1) $(elem).fadeOut(3000, function() { 
       $(elem).remove(); 
      }); 
     } 

     self.addLine = function (elem) { 
      if (elem.nodeType === 1) 
       $(elem).hide().fadeIn(3000); 
     } 

     self.removeItem = function() { 
      self.data.remove(function(item) { return item.test && item.test == 2; }); 
     } 

     self.addItem = function() { 
      self.data.splice(1, 0, { test: 9 }); 
     } 

     self.addremove = function() { 
      self.removeItem(); 
      var id = setInterval(function() { 
       self.addItem(); 
       clearInterval(id); 
      },3000); // the same interval as the "fadeout" 
     } 
    } 

    var vm = new ViewModel([{ test: 9 }, { test: 2 }, { test: 1 }, { test: 1 }, { test: 1 }, { test: 1 }, { test: 1 }]); 

    ko.applyBindings(vm); 
}); 

Answer 6

मिश्रण 'जोड़' और नॉकआउट की 'array.remove' अनपेक्षित व्यवहार का कारण हो सकता है, आप इसे लगातार बेहतर से निपटने चाहते हैं, उदाहरण के लिए, केवल नीचे की तरह 'जोड़' का उपयोग करें:

   self.addItem = function() { 
        var index = $.map(self.data(), function (item, index) { 
         if (item.test && item.test == 2) { 
          return index; 
         } 
        })[0]; 
        self.data.splice(index + 1, 0, { test: 9 }); 
        self.data.splice(index, 1); 
       } 

       self.addremove = function() { 
        //self.removeItem(); 
        var id = setInterval(function() { 
         self.addItem(); 
         clearInterval(id); 
        }, 1000); 
       } 

Answer 7

यहां वर्णित समस्या 3.4.0 में तय की गई थी। देखें https://github.com/knockout/knockout/issues/790