2012-01-12 21 views
10

में हैंडलर के बाद मुझे नॉकआउटजे पहले प्राप्त करने में कुछ समस्याएं आ रही हैं और बाद में हैंडलर आग लगाना।पहले से ट्रिगर करना, नॉकआउटजेएस

यह प्रासंगिक कोड टुकड़ा

function viewModel(list) { 
    var self = this; 

    this.items = ko.observableArray(list); 

    this.removeItem = function(item) { 
     self.items.remove(item); 
    } 

    this.removeFirst = function() { 
     self.removeItem(self.items()[0]); 
    }; 

    this.onRemove = function(elements) { 
     console.log("Updating"); 
     $(elements).addClass('transition-out'); 
    }; 
} 

ko.applyBindings(new viewModel(items)); 

और यह मार्कअप

<button data-bind="click: removeFirst">Remove first</button> 
<ul data-bind='foreach: items, beforeRemove: onRemove'> 
    <li data-bind="text: name, click: $parent.removeItem"></li> 
</ul> 

मैं देख रहा हूँ सूची अद्यतन है, लेकिन onRemove हैंडलर निकाल दिया कभी नहीं है।

मैंने समस्या का वर्णन करने के लिए JSFiddle बनाया है।

धन्यवाद,

जीन

उत्तर

27

वाक्य रचना है कि आप उपयोग करना चाहते हैं की तरह लग रहा:

data-bind='foreach: { data: items, beforeRemove: onRemove }' 

beforeRemove एक विकल्प है कि foreach (और अंततः template) बाध्यकारी द्वारा स्वीकार किया जाता है। इसे एक अलग बाध्यकारी के रूप में माना जा रहा था जिस तरह से आप इसे निर्दिष्ट कर रहे थे। यदि बाध्यकारी मौजूद नहीं है, तो इसे अनदेखा किया जाता है (कुछ बाध्यकारी सभी बाइंडिंग एक्सेसर के माध्यम से पहुंचा जा सकता है, इसलिए केओ उसे नहीं जानता और त्रुटि नहीं फेंकता है)।

इसके अलावा, फ़ंक्शन को आपके "टेम्पलेट" में प्रत्येक नोड के लिए एक बार बुलाया जाएगा। आपके मामले में यह एक टेक्स्ट नोड होगा, li, और दूसरा टेक्स्ट नोड। यदि आप टेक्स्ट नोड्स को अनदेखा करना चाहते हैं, तो जांचें कि तत्व (पहला तर्क) नोड टाइप 1 है।

+0

धन्यवाद! मुझे याद आया कि 'पहले से हटा' का दायरा 'foreach' का मूल्य होना चाहिए; निश्चित रूप से समझ में आता है! –

+0

ऐसा लगता है कि यह एनिमेटेड संक्रमणों के लिए नॉकआउटजे लाइव ट्यूटोरियल पेज पर भी समझाया गया है। मुझे खुशी है कि मुझे यह जवाब मिला! धन्यवाद निमेयर। – ClearCloud8

संबंधित मुद्दे