एक पहले से ही आबादी वाले DOM एलीमेंट

Question

मैं एक पृष्ठ है कि मैं में KnockoutJS उपयोग करना चाहते हैं एक ASP.NET MVC3 app से सर्वर किया जा रहा है पर काम कर रहा हूँ से कनेक्ट हो रहा knockoutjs।

देखें पर मैं पारित कर दिया हो रही एक आबादी वाला मॉडल (जिसे मैं एक नॉकआउटजेएस व्यू मॉडेल में परिवर्तित कर रहा हूं) और मैं कुछ डोम सर्वर-साइड बनाना चाहता हूं। यह तार्किक लगता है क्योंकि मेरे पास प्रारंभिक एचटीएमएल उत्पन्न करने के लिए पहले से ही ऑब्जेक्ट्स हैं और यह उपयोगकर्ताओं को बेहतर अनुभव प्रदान करेगा क्योंकि पेज लोड और डीओएम आबादी के बीच देरी नहीं होगी (इसका मतलब यह भी है कि मेरे पास गैर- -जवास्क्रिप्ट क्लाइंट)।

कुछ शोध करने के बाद मैं यह सोचते हैं रहा हूँ मैं एक कस्टम बनाने की जरूरत bindingHandler तो मैं इस बनाया:

ko.bindingHandlers.serverForEach = { 
    init: function() { /* no-op */ }, 
    update: function() { 
     //call off to the built in loop handler 
    } 
}; 

तो मेरी सोच था मैं (हैंडलर जो init चरण में कुछ नहीं करता है बनाने के रूप में डोम पहले से ही आबादी वाला है) और update चरण में मैं केवल नया मान डालेगा। मैं अंतर्निहित टेम्पलेटिंग का लाभ उठाना चाहता हूं, इसलिए यह एक सामान्य समाधान भी हो सकता है।

समस्या यह है कि इस परिदृश्य में सब कुछ अलग हो जाता है। यदि init कुछ भी नहीं करता है तो update विफल रहता है क्योंकि अंतिम तर्क के रूप में आने वाले बाध्यकारी कॉन्टेक्स्ट गलत लगता है, और यदि मैं init शामिल करता हूं तो यह मौजूदा HTML को नष्ट कर देगा।

किसी ने भी इस बात की कोशिश की/मुझे पता है कि मुझे इस परिदृश्य का समर्थन करने के लिए क्या करना चाहिए या क्या आप इसे अभी भी हटा सकते हैं/कर सकते हैं?

इसके अलावा, मैं नॉकआउट HTML से सर्वर जेनरेट किए गए सर्वर के लिए एक अलग DOM तत्व नहीं चाहता हूं।

Answer 1

मुझे लगता है कि मैं समझता हूं कि आपकी समस्या क्या है। आप शुरुआत में गैर-जेएस उपयोगकर्ताओं के लिए मार्कअप को पॉप्युलेट करना चाहते हैं और केओ को बाध्य करते समय इसे ओवरराइट करना चाहते हैं।

टेक्स्ट की तरह सरल बाइंडिंग के लिए यह कोई समस्या नहीं है, बस सर्वर से मार्कअप में डेटा-बाइंड विशेषता शामिल करें या रनटाइम पर शामिल करें और दूर जाएं। टेम्पलेट फोरैच बाध्यकारी चीजों के लिए थोड़ा और मुश्किल है क्योंकि यह बाध्य होने पर मूल्यों को जोड़ देगा।

Here is a jsfiddle जो उपरोक्त परिदृश्य का वर्णन करता है और नीचे दिए गए समाधान का प्रदर्शन करता है। यह थोड़ा बुनियादी है लेकिन आपको शुरू करना चाहिए।

बुनियादी विचार init पर तत्व को साफ़ करना है और फिर शेष टेम्पलेट बाध्यकारी को सौंपना है।

ko.bindingHandlers.serverForEach = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     // clear the list first 
     $(element).children().remove(); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     ko.bindingHandlers['template'].update(element, valueAccessor, allBindingsAccessor, viewModel); 
    } 
}; 

उम्मीद है कि इससे मदद मिलती है।

Answer 2

मामले में किसी को भी इस की जरूरत है knockout.js के लिए काम करने के लिए 2.0+ (ध्यान दें अद्यतन में bindingContext)

ko.bindingHandlers.serverForEach = { 
init: function(element, valueAccessor) { 
     $(element).children().remove(); 
     return ko.bindingHandlers.template.init(element, valueAccessor); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     return ko.bindingHandlers.template.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
    } 
};