नॉकआउट चेकबॉक्स परिवर्तन घटना पुराने मान भेजती है

Question

मुझे नॉकआउट "चेक" बाध्यकारी के साथ समस्या हो रही है। ऐसा लगता है कि चेकबॉक्स पर "चेंज" ईवेंट पुराने मूल्य को पुराना मान देता है, इसे अद्यतन करने से पहले (इसलिए यदि यह अनचेक किया गया तो यह झूठा होगा)। मुझे नहीं लगता कि मैं मूल्य की सदस्यता ले सकता हूं क्योंकि मेरे पास ऑब्जेक्ट के अंदर है।

<tbody data-bind="foreach: Categories"> 
       <tr> 
        <td><input type="checkbox" data-bind="checked: ShowOpened, event: { change: $root.CategoryChange }" /></td> 
       </tr> 
      </tbody> 
<script type="text/javascript"> 
var Category = function (Id, Name, Order, ShowOpened) { 
    this.Id = Id; 
    this.Name = Name; 
    this.Order = Order; 
    this.ShowOpened = ShowOpened; 
    this.IsUpdated = ko.observable(false); 

    this.OldOrder = Order; 
    this.OldShowOpened = ShowOpened; 
}; 
var ViewModel = { 
    Categories: ko.observableArray([]), 
    CategoryChange: function(pCategory) { 
     if(pCategory.Order != pCategory.OldOrder || pCategory.ShowOpened != pCategory.OldShowOpened) 
      pCategory.IsUpdated(true); 
     else 
      pCategory.IsUpdated(false); 
    } 
}; 
ko.applyBindings(ViewModel); 
</script> 

तो इस उदाहरण में मैं चेकबॉक्स कि CategoryChange विधि है कि वस्तु के अंदर एक चर बदल जाएगा (है कि मैं बाद में की जरूरत है पता है कि वस्तु अपडेट किया जाता है) ट्रिगर कर सकते हैं ShowOpened है। लेकिन जब चेचबॉक्स बदल जाता है तो यह हमेशा पुराना मान भेजता है, ट्रिगरिंग विधि, और उसके बाद मान बदलता है। क्या इसको ठीक करने का कोई तरीका है?

Answer 1

तरह दिखाई देंगे जब से तुम करते हुए कहा कि ko.observables की कमी कोई मुद्दा नहीं है पर कायम है, मैं इस पर करीब देखा है। ऐसा लगता है कि आप सही हैं! change ईवेंट को से से पहले वास्तविक मान सेट किया गया है। मुझे डर है कि मुझे इसका कारण पता नहीं है।

लेकिन वहाँ एक आसान तरीका यह तय करने के लिए है: बस click घटना के लिए change घटना बदलने के लिए:

<input type="checkbox" data-bind="checked: ShowOpened, click: $root.CategoryChange" /> 

याद रखें, स्पष्ट रूप से click ईवेंट हैंडलर के अंत में return true; डाल करने के लिए है कि आप। अन्यथा नया मान चेकबॉक्स पर सेट नहीं किया जाएगा।

यदि आप click ईवेंट का उपयोग नहीं करना चाहते हैं, तो आप इसे अन्य तरीके से कर सकते हैं। ShowOpened के परिवर्तनों की सदस्यता लें:

this.ShowOpened = ko.observable(ShowOpened); 
this.ShowOpened.subscribe(function(newValue) { 
    /* Do something when ShowOpened changes. 
     newValue variable holds the new value, obviously. :) */ 
}); 

Answer 2

ईवेंट बाध्यकारी के बजाय subscribe का उपयोग करने का प्रयास करें। यह काम करना चाहिए अब

<table> 
    <tbody data-bind="foreach: Categories"> 
     <tr> 
      <td><input type="checkbox" data-bind="checked: ShowOpened" /></td> 
     </tr> 
    </tbody> 
<table> 

var Category = function (Id, Name, Order, ShowOpened) { 
    this.Id = Id; 
    this.Name = Name; 
    this.Order = Order; 
    this.ShowOpened = ko.observable(ShowOpened); 
    this.IsUpdated = false; 

    this.OldOrder = Order; 
    this.OldShowOpened = ShowOpened; 

    this.ShowOpened.subscribe(function (newShowOpened) { 
     if(this.Order != this.OldOrder || this.ShowOpened() != this.OldShowOpened) 
      this.IsUpdated = true; 
     else 
      this.IsUpdated = false; 
    }, this); 
}; 
var ViewModel = { 
    Categories: ko.observableArray([]) 
}; 
ko.applyBindings(ViewModel); 

या विकल्प (और मेरी राय में एक बेहतर समाधान) के रूप में आप dependentObservable उपयोग कर सकते हैं, अब computed कहा जाता है। यहाँ यह तरह

<table> 
    <tbody data-bind="foreach: Categories"> 
     <tr> 
      <td> 
       <input type="checkbox" data-bind="checked: ShowOpened" /> 
       <span data-bind="text: IsUpdated"></span> 
      </td> 
     </tr> 
    </tbody> 
</table> 
var Category = function (Id, Name, Order, ShowOpened) { 
    this.Id = Id; 
    this.Name = Name; 
    this.Order = Order; 
    this.ShowOpened = ko.observable(ShowOpened); 
    this.OldOrder = Order; 
    this.OldShowOpened = ShowOpened; 
    this.IsUpdated = ko.computed(function() { 
     return this.Order != this.OldOrder || this.ShowOpened() != this.OldShowOpened; 
    }, this); 
}; 
var ViewModel = { 
    Categories: ko.observableArray([]) 
}; 
ko.applyBindings(ViewModel); 

Answer 3

मैं भी इस मुद्दे को नहीं था, लेकिन मैं क्योंकि मैं पहले से ही एक ajax अनुरोध है कि मान रीसेट कर सकता है के साथ एक ही क्षेत्र की सदस्यता ली गई थी समाधान सदस्यता लें का उपयोग नहीं कर सका। कोड बदलते समय कोड लूप में रहेगा। तो मैंने निम्नलिखित कार्यवाही (इसके बदसूरत लेकिन यह काम करता है) जोड़ा।

$("input[type='radio'], input[type='checkbox']", element).on("change", function (e, data) { 
    setTimeout(function() { 
     $(this).trigger("afterChange", data); 
    }.bind(this), 10); 
}); 

तो बजाय परिवर्तन सुनने पर मैं afterChange घटना को सुनना।

<div data-bind="foreach: answerList"> 
    <input type="checkbox" data-bind="event: { afterChange: $root.sendSelectedAnswer($data) }"/> 
</div> 

मुझे पता नहीं है कि यह सबसे अच्छा समाधान नहीं है, लेकिन मेरे मामले में मेरे पास कोई अन्य विकल्प नहीं था।