नॉकआउट और jQuery मोबाइल: सूचियों का चयन करने के लिए बाध्यकारी डेटा

Question

मैं उसी प्रोजेक्ट में नॉकआउट (संस्करण 2.0) और jQuery मोबाइल (संस्करण 1.0.1) दोनों का उपयोग कर रहा हूं। समस्या सूची चुनने के लिए बाध्यकारी डेटा के साथ समस्या है। jQuery मोबाइल एक ऐसे तरीके से चयन सूचियों को प्रस्तुत करता है जहां प्रतीत होता है चयनित मूल्य और वास्तविक सूची अलग-अलग तत्व हैं। यह

$(element).selectmenu('refresh', true); 

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

इसे कम करने के लिए, मैंने अपना खुद का नॉकआउट बाइंडिंग हैंडलर लिखा था।

<select name="selection" data-bind="jqmOptions: values, optionsValue: 'id', optionsText: 'name', value: selectedValue"> 
</select> 

jqmOptions के कार्यान्वयन: मान निम्न कोड के साथ चयन सूची के लिए बाध्य हैं

ko.bindingHandlers.jqmOptions = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     if (typeof ko.bindingHandlers.options.init !== 'undefined') { 
      ko.bindingHandlers.options.init(element, valueAccessor, allBindingsAccessor, viewModel); 
     } 
    }, 

    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     if (typeof ko.bindingHandlers.options.update !== 'undefined') { 
      ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, viewModel); 
     } 

     var instance = $.data(element, 'selectmenu'); 
     if (instance) { 
      $(element).selectmenu('refresh', true); 
     } 
    } 
}; 

इस का उपयोग करता है देशी options बाध्यकारी लेकिन यह है कि के अलावा, यह स्वचालित रूप से परिवर्तित करने के बाद चयन सूचियों ताज़ा करता है सूची मूल्य। इसके साथ एक समस्या है हालांकि जब मैं चयनित मूल्य बदल रहा हूं। यदि मैंने पहली बार सूची मान सेट किया है, तो मेरे jqmOptions चुनिंदा सूची को रीफ्रेश करता है लेकिन उस बिंदु पर, चयनित मान अभी तक सेट नहीं है। मैं एक चुनिंदा सूची के साथ समाप्त होता हूं, जिसमें सभी सही मान होते हैं और आंतरिक रूप से सही विकल्प चुना जाता है, लेकिन jQuery मोबाइल अभी भी डिफ़ॉल्ट मान को चयनित के रूप में प्रदर्शित करता है।

this.values(someArrayOfValues); 
this.selectedValue(oneOfTheArrayValues); 

नॉकआउट मुझे पहले से चयनित मान सेट करने और फिर सूची मूल्यों की स्थापना, क्योंकि इस मामले में जब मैं चयनित मान सेट कर रहा हूं कोई अनुमति प्राप्त मान रहे हैं अनुमति नहीं है। इस प्रकार चयनित मूल्य हमेशा अपरिभाषित होता है।

क्या नॉकआउट कस्टम बाइंडिंग लिखने का कोई तरीका है जो दोनों मामलों में चयन सूची तत्व को रीफ्रेश करेगा: जब सूची मूल्य बदलते हैं और चयनित मान बदलते हैं? तथापि

this.values(someArrayOfValues); 
this.selectedValue(oneOfTheArrayValues); 
this.values(someArrayOfValues); 

यह बहुत सुंदर समाधान नहीं है और मैं इसे बेहतर हल करने के लिए करना चाहते हैं:

वर्तमान में मैं निम्नलिखित कोड के साथ इस स्थिति का समाधान।

Answer 1

मेरे व्यक्तिगत अनुभव के लिए (jquerymobile 1.1.0 के साथ और 2.1.0 knockoutjs), मैं केवल का उपयोग किया है jqmoptions (पहली पोस्ट में देखा जाता है) एक वैध नॉकआउट एक चयन के लिए बाध्य करने के लिए बाध्य है।चयन के साथ, 'मान' बाध्यकारी कार्य बनाने के लिए, बस यह पहली के रूप में बाध्यकारी

<select name="myname" id="myid" data-bind="value: myvalue, jqmoptions: myvalues, optionsValue: 'id', optionsText: 'desc'"></select> 

में घोषित लग रहा है कि आदेश अनिवार्य है: http://goo.gl/nVbHc

Answer 2

मैंने खुद को हल करने का अंत किया। मैंने लिखा मेरे अपने jqmValue बाध्यकारी:

ko.bindingHandlers.jqmValue = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     if (typeof ko.bindingHandlers.value.init !== 'undefined') { 
      ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, viewModel); 
     } 
    }, 

    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     if (typeof ko.bindingHandlers.value.update !== 'undefined') { 
      ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, viewModel); 
     } 

     var instance = $.data(element, 'selectmenu'); 
     if (instance) { 
      $(element).selectmenu('refresh', true); 
     } 
    } 
}; 

चयन सूची कोड उसके बाद निम्न करने के लिए बदल जाता है:

मैं पहले से ही सवाल पूछने से पहले इस कल को लागू करने की कोशिश की, लेकिन जाहिरा तौर पर मैं इसे खराब लिखा था तब क्योंकि यह काम नहीं किया। हालांकि, अब आंखों की एक नई जोड़ी के साथ मैं इसे सही ढंग से कार्यान्वित करने में कामयाब रहा हूं, इसलिए उम्मीद है कि यह उत्तर अन्य नॉकआउट और jQuery मोबाइल उपयोगकर्ताओं के लिए समस्या हल करता है।

Answer 3

बस स्पष्टता के लिए, सबसे अच्छा समाधान अब KO 3 के लिए .x होगा:

ko.bindingHandlers.jqmValue = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     if (typeof ko.bindingHandlers.value.init !== 'undefined') { 
     ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, viewModel); 
     } 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     var instance; 
     if (typeof ko.bindingHandlers.value.update !== 'undefined') { 
     ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, viewModel); 
     } 
     instance = $.data(element, 'mobile-selectmenu'); 
     if (instance) { 
     $(element).selectmenu('refresh', true); 
     } 
    } 
    }; 

और मिलान एचटीएमएल उपयोग:

<select data-bind="options: optionsList, optionsValue: 'Id', optionsText: 'Title', jqmValue: knockoutobservable"></select> 

Answer 4

दोनों नॉकआउट 3.3 + का उपयोग कर jQuery मोबाइल 1.4.5 और भी जब मैं एकाधिक चयन जो एक मूल्य बाध्यकारी

<select id="myselect1" data-bind="options: modelsA-Z, value: myModel"></select> 
<select id="myselect2" data-bind="options: modelsFamous, value: myModel"></select> 

1/2 init मूल्य नहीं दिखाया का चयन करें और 2 के बाद अपडेट नहीं किया था एक ही समस्या था ... मैं अंत में बंधन नीचे का उपयोग करें: (मूल्य से ऊपर की जगह: myModel -> jqmValue: myModel)

ko.bindingHandlers.jqmValue = { 
    init: function (element, valueAccessor) { 
     var result = ko.bindingHandlers.value.init.apply(this, arguments); 
     try { 
      $(element).selectmenu("refresh"); 
     } catch (x) {} 
     return result; 
    }, 
    update: function (element, valueAccessor) { 
     ko.bindingHandlers.value.update.apply(this, arguments); 
     var value = valueAccessor(); 
     var valueUnwrapped = ko.utils.unwrapObservable(value); 
     try { 
      $(element).selectmenu("refresh"); 
     } catch (x) {} 
    } 
};