मेरे knockoutjs क्यों अवलोकन योग्य काम नहीं कर रहा है?

Question

मुझे इस काम का एक गणना मूल्य प्रतीत नहीं होता है। किसी भी इनपुट की सराहना की जाएगी।

मुझे सर्वर से मेरी कीमतों के लिए मूल्य मिलते हैं।

var pModel = function() { 
 
    var self = this; 
 
    self.prices = ko.observable({ "ID": 1,"Price1": 12,"Price2": 12}); 
 

 
    self.Total = ko.computed(function() { 
 
     var total = 0; 
 
     total = self.prices().Price1 + self.prices().Price2; 
 
     return total; 
 
    }); 
 
}; 
 
var VModel = new pModel(); 
 
ko.applyBindings(VModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script> 
 
<form action='/someServerSideHandler'> 
 
    <table> 
 
     <thead> 
 
      <tr>Prices</tr> 
 
     </thead> 
 
     <tbody id="calc"> 
 
      <tr> 
 
       <td>Price 1</td> 
 
       <td> 
 
        <input data-bind='value: prices().Price1' /> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td>price 2</td> 
 
       <td> 
 
        <input data-bind='value: prices().Price2' /> 
 
       </td> 
 
      </tr> 
 
      <td>TOTAL</td> 
 
      <td> <span data-bind="text: $root.Total"></span> 
 
      </td> 
 
     </tbody> 
 
    </table> 
 
</form>

Answer 1

आपका prices चर मानने योग्य है, लेकिन इसके सदस्य नहीं हैं। इस तरह यह पुन: निर्धारित करें:

self.prices = ko.observable({ 
    ID: ko.observable(1), 
    Price1: ko.observable(12), 
    Price2: ko.observable(12) 
}); 

अब, यह लगभग काम करता है, लेकिन अगर आप मान बदलते हैं, यह उनके तार को बदल देंगे, तो 18 और 12 की कुल 1812 हो जाएगा! हमें उन तारों को संख्याओं में बदलना होगा।

self.Total = ko.computed(function() { 
    var price1 = parseFloat(self.prices().Price1()); 
    var price2 = parseFloat(self.prices().Price2()); 
    return price1 + price2; 
}); 

आपको सभी सेट होना चाहिए!

Answer 2

आप मिश्रित चीजों को थोड़ा: हर मूल्य है कि आपके विचार मॉडल के अन्य हिस्सों पर प्रतिक्रिया करने में सक्षम है, तो बदल गया एक नमूदार होना चाहिए होना चाहिए। आपके मामले में, आपके पास एक वस्तु "कीमतें" है जो एक अवलोकन योग्य है लेकिन इस वस्तु के गुण (जैसे "मूल्य 1" और "मूल्य 2") कोई अवलोकन नहीं हैं। इसका अर्थ यह है कि, आपके गणना किए जाने योग्य अवलोकन केवल तभी अपडेट किए जाएंगे जब "कीमत" में दी गई पूरी वस्तु को एक नए मान से प्रतिस्थापित किया जाएगा।

तो बस इन मूल्यों obserable बनाने:

var pModel = function() { 
    var self = this; 

    self.prices = { 
     "ID": 1, // IDs normally do not change so no observable required here 
     "Price1": ko.observable(12), 
     "Price2": ko.observable(12) 
    }; 

    self.Total = ko.computed(function() { 
     return +self.prices.Price1() + +self.prices.Price2(); 
    }); 
}; 

डेमो: http://jsfiddle.net/Jjgvx/3/