नॉकआउट जेएस

Question

के साथ AJAX कॉल के बाद ताज़ा सूची में मेरे पास एक पृष्ठ पर अनुलग्नकों की एक सूची है जो jQuery $.ajax कॉल और नॉकआउट जेएस का उपयोग करके जेनरेट की गई है।

मेरे एचटीएमएल की तरह लग रहा है (यह वापस छीन लिया जाता है):

$(function() { 
    getFormAttachments(); 
}); 

function getAttachments() { 
    var request = $.ajax({ 
    type: "GET", 
    datatype: "json", 
    url: "/Attachment/GetAttachments" 
    }); 

    request.done(function (response) { 
    ko.applyBindings(new vm(response)); 
    }); 
} 

मेरा विचार मॉडल:

<tbody data-bind="foreach: attachments"> 
    <tr> 
    <td data-bind="text: Filename" /> 
    </tr> 
</tbody> 

मैं एक समारोह है कि संलग्नक जो एक JSON प्रतिक्रिया के रूप में दिया जाता है की सूची हो जाता है ऐसा लगता है:

function vm(response) { 
    this.attachments = ko.observableArray(response); 
}; 

एक ताज़ा बटन है जिसका उपयोग इस सूची को रीफ्रेश करने के लिए क्लिक कर सकता है क्योंकि से अधिक समय संलग्नक जोड़े गए हो सकते/हटाया:

$(function() { 
    $("#refresh").on("click", getAttachments); 
}); 

अनुलग्नकों की सूची के प्रारंभिक प्रतिपादन, ठीक है, लेकिन जब मैं ताज़ा करें बटन के माध्यम से फिर से getAttachments फोन क्लिक करें सूची में जोड़ा जाता (वास्तव में प्रत्येक आइटम है कई बार डुप्लिकेट)।

मैं यहाँ इस समस्या को प्रदर्शित करने के लिए एक jsFiddle बना लिया है:

http://jsfiddle.net/CpdbJ/137

क्या मैं गलत कर रहा हूँ?

Answer 1

यहां एक पहेली है जो आपके नमूने को ठीक करता है। आपका सबसे बड़ा मुद्दा यह था कि आप 'लागू बाइंडिंग' को कई बार बुला रहे थे। आम तौर पर आप पृष्ठ लोड पर लागू बाइंडिंग को कॉल करेंगे और फिर पृष्ठ आपके पृष्ठ के हिस्सों को रीफ्रेश करने के लिए नॉकआउट का कारण बनने के लिए व्यू मॉडल के साथ बातचीत करेगा।

http://jsfiddle.net/CpdbJ/136

एचटीएमएल

<table> 
    <thead> 
     <tr><th>File Name</th></tr> 
    </thead> 
    <tbody data-bind="foreach: attachments"> 
     <tr><td data-bind="text: Filename" /></tr> 
    </tbody> 
</table> 
<button data-bind="click: refresh">Refresh</button> 

जावास्क्रिप्ट

$(function() { 
    var ViewModel = function() { 
    var self = this; 

    self.count = 0; 
    self.getAttachments = function() { 
     var data = [{ Filename: "f"+(self.count*2+1)+".doc" }, 
        { Filename: "f"+(self.count*2+2)+".doc"}]; 
     self.count = self.count + 1; 
     return data; 
    } 

    self.attachments = ko.observableArray(self.getAttachments()); 

    self.refresh = function() { 
     self.attachments(self.getAttachments());   
    } 
    }; 

    ko.applyBindings(new ViewModel()); 
}); 

-

तुम भी मानचित्रण प्लगइन को देखने के लिए चाहते हो सकता है - http://knockoutjs.com/documentation/plugins-mapping.html। यह जेएसओएन को व्यू मॉडल में बदलने में आपकी मदद कर सकता है। इसके अतिरिक्त यह किसी ऑब्जेक्ट के लिए "कुंजी" होने के लिए एक संपत्ति असाइन करने में सक्षम है ... इसका उपयोग बाद के मैपिंग पर पुराने बनाम नई ऑब्जेक्ट्स को निर्धारित करने के लिए किया जाएगा।

यहाँ एक बेला मैं एक समय पहले लिखा था एक समान विचार प्रदर्शित करने के लिए है:

http://jsfiddle.net/wgZ59/276

नोट: मैं अपने मैपिंग नियम के भाग के रूप 'अपडेट' का उपयोग, लेकिन केवल इसलिए मैं करने के लिए लॉग इन कर सकते कंसोल। यदि आप मैपिंग प्लगइन अद्यतन वस्तुओं को कैसे अनुकूलित करना चाहते हैं, तो आपको केवल इसे जोड़ना होगा।