knockoutjs में देखने योग्य सरणी तत्व को कैसे अपडेट करें?

Question

मैं JavaScript श्रृंखला निम्नलिखित है,

[{"unitPrice": 2499,"currency":"$","productId":1,"retailerId":1,"productName":"XX ","formattedPrice":"$ 2,499","productImage":"Images/2012_08_12_00_45_39_4539.jpg","productQuantity":"9","totalPrice":19992}, 
{"unitPrice": 4999,"currency":"$","productId":2,"retailerId":1,"productName":"XX","formattedPrice":"$ 4,999","productImage":"Images/2012_08_12_00_46_45_4645.jpg","productQuantity":2,"totalPrice":9998}, 
{"unitPrice":4555,"currency":"$","productId":1,"retailerId":1,"productName":"XXXXX","formattedPrice":"$ 4,555","productImage":"Images/2013_02_12_10_57_49_5749_9868.png","productQuantity":3,"totalPrice":13665}] 

यहाँ प्रासंगिक एचटीएमएल है,

<table> 
<tbody data-bind="foreach: $root"> 
        <tr> 
         <td><img width="45" height="45" alt="" data-bind="attr:{src: productImage}"/></td> 
         <td><span data-bind="html: productName"></span></td> 
         <td><span data-bind="html: formattedPrice"></span></td> 
         <td><input type="number" class="quantity" data-bind="value: productQuantity, attr:{'data-id': productId }" /></td> 
         <td><span data-bind="html: totalPrice"></span></td> 
        </tr> 
       </tbody> 
</table> 

तो मैं के रूप में मानने योग्य सरणी बनाया है,

observableItems = ko.observableArray(items); 
ko.applyBindings(observableItems); 

अब मैं एक प्राप्त करने में सक्षम था specfic तत्व का उपयोग,

 var obj = ko.utils.arrayFirst(list(), function (item) { 
      return item.productId === id; 
     }); 

हालांकि

जब मैं बदलने के लिए,

item.productQuantity = 20; 

लेकिन यूआई अपडेट नहीं हो रहा है। यह भी कोशिश की,

item.productQuantity(item.productQuantity) 

लेकिन त्रुटि productQuantity हो रही एक समारोह

Answer 1

क्योंकि केवल सरणी एक नमूदार और नहीं सरणी के भीतर अलग-अलग तत्वों या प्रत्येक तत्व के गुणों है ऊपर व्यवहार है नहीं है।

जब आप item.productQuantity = 20; करते हैं, तो यह संपत्ति अपडेट करेगा लेकिन चूंकि यह एक अवलोकन योग्य नहीं है, यूआई अपडेट नहीं होता है।

सिमिलरी, item.productQuantity(20) आपको एक त्रुटि देता है क्योंकि productQuantity एक अवलोकन योग्य नहीं है।

आपको अपनी सरणी के प्रत्येक तत्व के लिए ऑब्जेक्ट संरचना को परिभाषित करना चाहिए और फिर उस प्रकार के तत्वों को अपने अवलोकन योग्य सरणी में जोड़ना चाहिए। एक बार ऐसा करने के बाद, आप item.productQuantity(20) जैसे कुछ करने में सक्षम होंगे और यूआई तुरंत अपडेट हो जाएगा।

EDIT ओपी द्वारा प्रदान किया गया फ़ंक्शन जोड़ा गया :)। यह फ़ंक्शन अवलोकन में तत्वों की प्रत्येक प्रॉपर्टी को अवलोकन में परिवर्तित कर देगा।

function convertToObservable(list) 
{ 
    var newList = []; 
    $.each(list, function (i, obj) { 
     var newObj = {}; 
     Object.keys(obj).forEach(function (key) { 
      newObj[key] = ko.observable(obj[key]); 
     }); 
     newList.push(newObj); 
    }); 
    return newList; 
} 

अंत संपादित

आप कोड के उस टुकड़े को बदलने में असमर्थ हैं, तो आप भी observableItems.valueHasMutated() की तरह कुछ कर सकते हैं। हालांकि, यह करने के लिए एक अच्छी बात नहीं है क्योंकि यह केओ और आपके यूआई को संकेत देता है कि पूरी सरणी बदल गई है और यूआई बाइंडिंग के आधार पर पूरी सरणी प्रस्तुत करेगा। नमूदार इकाई के लिए नियमित रूप से जे एस इकाई कन्वर्ट http://knockoutjs.com/documentation/plugins-mapping.html

:

Answer 2

आप आसानी से प्लगइन ko.mapping वस्तु कन्वर्ट करने के लिए नमूदार बनने के लिए उपयोग कर सकते हैं

:

var viewModel = ko.mapping.fromJS(data); 

नियमित जे एस वस्तु में कनवर्ट नमूदार वस्तु

var unmapped = ko.mapping.toJS(viewModel);