ट्रैकिंग परिवर्तन - देखने योग्य अवलोकन में अवलोकन तत्व

Question

मुझे जावास्क्रिप्ट और Knockout.js का उपयोग कर वेब अनुप्रयोग में पूर्णांक की एक सरणी संपादित करने की आवश्यकता है। यह सरणी टेक्स्ट बॉक्स से जुड़ी होगी, और जब भी किसी भी टेक्स्ट बॉक्स का मान बदल दिया जाता है, तो सरणी अपडेट की जाती है। और जब यह अद्यतन हो जाता है, तत्वों का योग गणना की जाती है।

यह मेरी पहली कोशिश है: http://jsfiddle.net/ZLs2A/0/। यह काम नहीं कर रहा है (किसी भी तत्व के लिए नया मान टाइप करते समय योग मान अपडेट नहीं होता है)। जब मुझे एहसास हुआ एरेरे केवल वस्तुओं को डालने या हटाने के बाद योग फ़ंक्शन को ट्रिगर करेगा।

<h4>Numbers</h4> 
<button data-bind="click: add">Add</button> 
<ul data-bind="foreach: numbers"> 
    <li> 
     <input data-bind="value: $data"></input> 
    </li> 
</ul> 
<span data-bind="text: sum"></span> 

function MyViewModel() { 
    var self = this; 

    self.numbers = ko.observableArray([ 
     1, 
     2, 
     3 
    ]); 

    self.sum = ko.computed(function() { 
     var items = self.numbers(); 
     var total = 0; 
     for (var i = 0; i < items.length; i++) { 
      total += parseInt(items[i]); 
     } 
     return total; 
    }); 

    self.add = function() { 
     var lastIndex = self.numbers().length - 1; 
     var lastValue = self.numbers()[lastIndex]; 
     self.numbers.push(lastValue + 1); 
    } 
} 

ko.applyBindings(new MyViewModel()); 

मेरा अगला प्रयास संख्या सरणी एक नमूदार (http://jsfiddle.net/ZLs2A/1/) में हर तत्व बनाने के लिए किया गया था। यह फिर से काम नहीं किया।

self.numbers = ko.observableArray([ 
    ko.observable(1), 
    ko.observable(2), 
    ko.observable(3) 
]); 

मेरी आखिरी कोशिश एक अवलोकन संपत्ति के अंदर तत्व के मूल्य को पकड़ने के लिए एक नई कक्षा (ArrayItem) बना रही थी। इस बार यह काम किया! (http://jsfiddle.net/ZLs2A/3/)

<h4>Numbers</h4> 
<button data-bind="click: add">Add</button> 
<ul data-bind="foreach: numbers"> 
    <li> 
     <input data-bind="value: value"></input> 
    </li> 
</ul> 
<span data-bind="text: sum"></span> 

function MyViewModel() { 
    var self = this; 

    self.numbers = ko.observableArray([ 
     new ArrayItem(1), 
     new ArrayItem(2), 
     new ArrayItem(3) 
    ]); 

    self.sum = ko.computed(function() { 
     var items = self.numbers(); 
     var total = 0; 
     for (var i = 0; i < items.length; i++) { 
      total += parseInt(items[i].value()); 
     } 
     return total; 
    }); 

    self.add = function() { 
     var lastIndex = self.numbers().length - 1; 
     var lastItem = self.numbers()[lastIndex]; 
     var newValue = parseInt(lastItem.value()) + 1; 
     self.numbers.push(new ArrayItem(newValue)); 
    } 
} 

function ArrayItem(value){ 
    var self = this; 
    self.value = ko.observable(value); 
} 

ko.applyBindings(new MyViewModel()); 

हालांकि, मैं इस नई श्रेणी ArrayItem बनाने के लिए करने के लिए पसंद नहीं आया। क्या इससे छुटकारा पाने का कोई तरीका है, उदाहरण के काम को देखने के लिए केवल देखने योग्य तत्वों का अवलोकन (मेरे दूसरे प्रयास की तरह)?

Answer 1

नॉकआउट मूल्य को ट्रैक नहीं करेगा, लेकिन एक वर्कअराउंड के रूप में आप ईवेंट कीप्रेस का उपयोग कर सकते हैं या मूल्यों को बदल सकते हैं और अपडेट कर सकते हैं। देखें बेला: http://jsfiddle.net/tkirda/ZLs2A/4/

function MyViewModel() { 
    var self = this; 

    self.numbers = ko.observableArray([ 
     1, 
     2, 
     3 
    ]); 

    self.onChange = function(val, e){ 
     var el = e.srcElement; 
     var newVal = parseInt(el.value); 
     var index = parseInt(el.getAttribute('data-index')); 
     self.numbers()[index] = newVal; 
     self.updateSum(); 
    } 

    self.sum = ko.observable(0); 

    self.updateSum = function() { 
     var items = self.numbers(); 
     var total = 0; 
     for (var i = 0; i < items.length; i++) { 
      total += parseInt(items[i]); 
     } 
     self.sum(total); 
    }; 

    self.updateSum(); 

    self.add = function() { 
     var lastIndex = self.numbers().length - 1; 
     var lastValue = self.numbers()[lastIndex]; 
     self.numbers.push(lastValue + 1); 
    } 
} 

ko.applyBindings(new MyViewModel());