दिलचस्प पोस्ट
मॉडल में वर्तमान_उज़र एक्सेस करें Android पर किसी आशय के माध्यम से किसी भी प्रकार की फ़ाइल को चुनें हेक्स को एक बाइट सरणी में कनवर्ट कैसे करें? लिनक्स में आर के लिए कौन से आईडीई उपलब्ध हैं? एनएलटीके में पार्सिंग के लिए अंग्रेजी व्याकरण MySQL को लिखते समय टेक्स्टएरिया से लाइन ब्रेक को सुरक्षित रखें Android संपर्कों से पहला नाम और अंतिम नाम कैसे प्राप्त करें? सभी रिकॉर्ड वापस करने के लिए लोचदार खोज क्वेरी आईओएस: लोड पर डिवाइस ओरिएंटेशन गतिशील (सी # 4) और var के बीच अंतर क्या है? कैसे सी # में मौजूदा निष्पादन योग्य एक फ़ाइल एक्सटेंशन को संबद्ध करने के लिए रूबी: मल्टीपार्ट / फ़ॉर्म-डेटा के रूप में HTTP द्वारा फ़ाइल कैसे पोस्ट करें? PHP 7 में MySQLi एक्सटेंशन को कैसे सक्षम करें? मैं कैसे गिट फ़ाइल मोड (chmod) परिवर्तनों को अनदेखा कर सकता हूं? जहां उपयोगकर्ता अपलोड से छवियों को बचाने के लिए सबसे अच्छी जगह है

knockoutjs के साथ jquery ui संवाद एकीकृत

मैं jquery ui संवाद के लिए knockoutjs बाइंडिंग बनाने की कोशिश कर रहा हूँ, और संवाद को खोलने के लिए नहीं मिल सकता संवाद तत्व सही तरीके से बनाया गया है, लेकिन ऐसा लगता है कि display: none कॉल करने वाला dialog('open') नहीं हटाता है साथ ही, कॉल करने के लिए dialog('isOpen') एक बूलीयन की बजाय संवाद ऑब्जेक्ट देता है।

मैं jquery ui 1.8.7 के साथ नवीनतम knockoutjs और jquery 1.4.4 का उपयोग कर रहा हूँ। मैंने भी उसी परिणाम के साथ jQuery 1.7.1 के साथ यह कोशिश की है। यहां मेरा HTML है:

 <h1 class="header" data-bind="text: label"></h1> <div id="dialog" data-bind="dialog: {autoOpen: false, title: 'Dialog test'}">foo dialog</div> <div> <button id="openbutton" data-bind="dialogcmd: {id: 'dialog'}" >Open</button> <button id="openbutton" data-bind="dialogcmd: {id: 'dialog', cmd: 'close'}" >Close</button> </div> 

और यह जावास्क्रिप्ट है:

 var jQueryWidget = function(element, valueAccessor, name, constructor) { var options = ko.utils.unwrapObservable(valueAccessor()); var $element = $(element); var $widget = $element.data(name) || constructor($element, options); $element.data(name, $widget); }; ko.bindingHandlers.dialog = { init: function(element, valueAccessor, allBindingsAccessor, viewModel) { jQueryWidget(element, valueAccessor, 'dialog', function($element, options) { console.log("Creating dialog on " + $element); return $element.dialog(options); }); } }; ko.bindingHandlers.dialogcmd = { init: function(element, valueAccessor, allBindingsAccessor, viewModel) { $(element).button().click(function() { var options = ko.utils.unwrapObservable(valueAccessor()); var $dialog = $('#' + options.id).data('dialog'); var isOpen = $dialog.dialog('isOpen'); console.log("Before command dialog is open: " + isOpen); $dialog.dialog(options.cmd || 'open'); return false; }); } }; var viewModel = { label: ko.observable('dialog test') }; ko.applyBindings(viewModel); 

मैंने एक JSFiddle स्थापित किया है जो समस्या को पुन: उत्पन्न करता है।

मैं सोच रहा हूं कि क्या इस पर नॉकआउटजे और इवेंट हैंडलिंग के साथ कुछ है। मैंने क्लिक हैंडलर से true वापस करने की कोशिश की, लेकिन वह कुछ भी प्रभावित नहीं हुआ।

वेब के समाधान से एकत्रित समाधान "knockoutjs के साथ jquery ui संवाद एकीकृत"

ऐसा लगता है कि विजेट को .data ("dialog") पर लिखना और उसके बाद इसे चलाने का प्रयास करना एक समस्या पैदा कर रहा है। यहां एक नमूना है जहां। .data का उपयोग नहीं किया जाता है और इस तत्व के आधार पर खुला / बंद कहा जाता है: http://jsfiddle.net/rniemeyer/durKS/

वैकल्पिक रूप से, मैं थोड़ा अलग तरीके से संवाद के साथ काम करना चाहता हूं। मुझे यह नियंत्रित करना है कि क्या कोई दृश्यमान उपयोग करके संवाद खुले या बंद है। इसलिए, आप एक ही बाइंडिंग को डायलॉग पर ही इस्तेमाल करेंगे। init संवाद को इनिशियलाइज करेगा, जबकि update देखने के लिए एक जांच योग्य जांच करेगा कि क्या उसे खुले या बंद होना चाहिए। अब, खुले / बंद करें बटन को एडी के बारे में चिंता करने या वास्तविक संवाद का पता लगाने के बजाय बुलियन का अवलोकन करने की आवश्यकता होती है।

 ko.bindingHandlers.dialog = { init: function(element, valueAccessor, allBindingsAccessor) { var options = ko.utils.unwrapObservable(valueAccessor()) || {}; //do in a setTimeout, so the applyBindings doesn't bind twice from element being copied and moved to bottom setTimeout(function() { options.close = function() { allBindingsAccessor().dialogVisible(false); }; $(element).dialog(options); }, 0); //handle disposal (not strictly necessary in this scenario) ko.utils.domNodeDisposal.addDisposeCallback(element, function() { $(element).dialog("destroy"); }); }, update: function(element, valueAccessor, allBindingsAccessor) { var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible), $el = $(element), dialog = $el.data("uiDialog") || $el.data("dialog"); //don't call open/close before initilization if (dialog) { $el.dialog(shouldBeOpen ? "open" : "close"); } } }; 

जैसे उपयोग किया जाता है:

 <div id="dialog" data-bind="dialog: {autoOpen: false, title: 'Dialog test' }, dialogVisible: isOpen">foo dialog</div> 

यहां एक नमूना है: http://jsfiddle.net/rniemeyer/SnPdE/

इसे यहां जोड़ना क्योंकि यह ऐसा है जो कि ज्यादातर लोगों को jQuery UI संवाद और नॉकआउट जेएस के साथ समस्याओं पर खोज करते हैं।

"डबल बाध्यकारी" मुद्दे से बचने के लिए केवल एक और विकल्प ऊपर दिए गए उत्तर में समझाया गया है। मेरे लिए, setTimeout () अन्य बाइंडिंग को विफल करने के कारण पैदा कर रहा था जिसके लिए संवाद को पहले ही आरंभ किया जाना चाहिए मेरे लिए काम करने वाला सरल समाधान स्वीकार किए गए उत्तर में निम्नलिखित परिवर्तन कर रहा था:

  1. कस्टम संवाद बाइंडिंग का उपयोग करके किसी भी तत्व को वर्ग = 'संवाद' जोड़ें।

  2. इस पृष्ठ को लोड करने के बाद कॉल करें, लेकिन ko.applyBinding () को कॉल करने से पहले:

    $ ('। संवाद')। संवाद ({autoOpen: false});

कस्टम बाइंडिंग के init के अंदर setTimeout निकालें, और बस कोड को सीधे कॉल करें।

चरण 2 यह सुनिश्चित करता है कि किसी भी jQuery के यूआई संवादों को किसी भी KO बाइंडिंग से पहले आरंभ किया गया है। इस तरह से jQuery के यूआई ने पहले ही DOM तत्वों को स्थानांतरित कर दिया है, ताकि आपको उन्हें लागू होने के बीच में बढ़ने की चिंता न करें। Init कोड अभी भी काम करता है (setTimeout को हटाने के अलावा) क्योंकि डायलॉग () फ़ंक्शन सिर्फ एक मौजूदा संवाद को अपडेट करेगा यदि पहले से आरम्भ किया गया है।

मुझे इसकी आवश्यकता क्यों है, इसका एक उदाहरण कस्टम बाइंडिंग के कारण है कि मैं संवाद का शीर्षक अद्यतन करने के लिए उपयोग करता हूं:

 ko.bindingHandlers.jqDialogTitle = { update: function(element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); $(element).dialog('option', 'title', value); } }; 

मैं मुख्य डायलॉग बाइंडिंग के लिए अद्यतन फ़ंक्शन के बजाय इसके लिए एक अलग बाइंडिंग का उपयोग करता हूं, क्योंकि मैं केवल शीर्षक को अपडेट करना चाहता हूं, अन्य गुण जैसे कि ऊँचाई और चौड़ाई नहीं (इस संवाद का आकार बदलने के लिए सिर्फ इसलिए नहीं क्योंकि मैं शीर्षक बदलता हूं )। मुझे लगता है कि मैं अपडेट का उपयोग कर सकता हूं और सिर्फ ऊंचाई / चौड़ाई को हटा सकता हूं, लेकिन अब मैं दोनों / या तो कर सकता हूं और सेटटिमेउट पूरा होने के बारे में चिंता नहीं करता।

मैंने आरपी नेमेयर के जवाब में थोड़ा बदलाव किया है ताकि संवाद के विकल्प को अवलोकन करने की अनुमति मिल सके

http://jsfiddle.net/YmQTW/1/

विजेट को प्रारंभ करने के लिए ko.toJS के साथ अवलोकन मानों को प्राप्त करें

 setTimeout(function() { options.close = function() { allBindingsAccessor().dialogVisible(false); }; $(element).dialog(ko.toJS(options)); }, 0); 

और अपडेट पर अवलोकन के लिए जांचें

 //don't call dialog methods before initilization if (dialog) { $el.dialog(shouldBeOpen ? "open" : "close"); for (var key in options) { if (ko.isObservable(options[key])) { $el.dialog("option", key, options[key]()); } } } 

अब यह लाइब्रेरी है जिसमें नॉकआउटजेएस के लिए सभी JQueryUI बाइंडिंग शामिल हैं, ज़ाहिर है, संवाद विजेट।

यह महान आरपी निमेयर बाध्यकारी हैंडलर का एक भिन्नता है, जो एक भिन्न परिदृश्य के लिए उपयोगी है।

किसी इकाई के संस्करण की अनुमति देने के लिए, आप संस्करण नियंत्रणों के साथ एक <div> बना सकते हैं, और बाइंडिंग के with उपयोग कर सकते हैं, जो इस संस्करण के उद्देश्य के लिए बनाई गई किसी अवलोकन पर निर्भर करता है।

उदाहरण के लिए, किसी person के संस्करण की अनुमति देने के लिए, आप editedPerson को बना सकते हैं और देख सकते हैं, और इस तरह एक बाध्यकारी के साथ संस्करण नियंत्रक बना सकते हैं:

 data-bind="with: editedPerson" 

जब आप एक व्यक्ति को अवलोकन करने योग्य एलके में जोड़ते हैं तो:

 vm.editedPerson(personToEdit); 

बाइंडिंग div दृश्यमान बनाता है जब आप संस्करण को खत्म करते हैं, तो आप ऐसा अवलोकन करने के लिए अवलोकन करने के लिए सेट कर सकते हैं, जैसे कि

 vm.editedPerson(null); 

और div बंद हो जाएगा

आरपी नेमेयर के बाइंडिंगहैंडलर की मेरी विविधता एक jQuery यूआई संवाद के अंदर इस div को स्वचालित रूप से दिखाने की अनुमति देता है। इसका उपयोग करने के लिए आपको बाध्यकारी के with ही मूल रखना होगा, और जैसे jQuery UI संवाद विकल्प निर्दिष्ट करें:

 data-bind="with: editedPerson, withDialog: {/* jQuery UI dialog options*/}" 

आप अपने बाध्यकारी हैंडलर का कोड प्राप्त कर सकते हैं, और इसे यहां क्रिया में देख सकते हैं:

http://jsfiddle.net/jbustos/dBLeg/

आप डायलॉग के लिए अलग-अलग डिफॉल्ट के लिए आसानी से इस कोड को संशोधित कर सकते हैं, और यहां तक ​​कि जेएस मॉड्यूल में हेन्डलर को संलग्न करके और इन्हें संशोधित करने के लिए एक सार्वजनिक कॉन्फ़िगरेशन फ़ंक्शन को जोड़कर इन डिफॉल्ट को कॉन्फ़िगर करने योग्य बना सकते हैं। (आप इस फ़ंक्शन को बाध्यकारी हैंडलर में जोड़ सकते हैं, और यह काम करना जारी रखेगा)।

 // Variation on Niemeyer's http://jsfiddle.net/rniemeyer/SnPdE/ /* This binding works in a simple way: 1) bind an observable using "with" binding 2) set the dialog options for the ui dialog using "withDialog" binding (as you'd do with an standard jquery UI dialog) Note that you can specify a "close" function in the options of the dialog an it will be invoked when the dialog closes. Once this is done: - when the observable is set to null, the dialog closes - when the observable is set to something not null, the dialog opens - when the dialog is cancelled (closed with the upper right icon), the binded observable is closed Please, note that you can define the defaults for your binder. I recommend setting here the modal state, and the autoOpen to false. */ ko.bindingHandlers.withDialog = { init: function(element, valueAccessor, allBindingsAccessor) { var defaults = { modal: false, autoOpen: false, }; var options = ko.utils.unwrapObservable(valueAccessor()); //do in a setTimeout, so the applyBindings doesn't bind twice from element being copied and moved to bottom $.extend(defaults, options) setTimeout(function() { var oldClose = options.close; defaults.close = function() { if (options.close) options.close(); allBindingsAccessor().with(null); }; $(element).dialog(defaults); }, 0); //handle disposal (not strictly necessary in this scenario) ko.utils.domNodeDisposal.addDisposeCallback(element, function() { $(element).dialog("destroy"); }); }, update: function(element, valueAccessor, allBindingsAccessor) { var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().with), $el = $(element), dialog = $el.data("uiDialog") || $el.data("dialog"); //don't call open/close before initilization if (dialog) { $el.dialog(shouldBeOpen ? "open" : "close"); } } }; var person = function() { this.name = ko.observable(), this.age = ko.observable() } var viewModel = function() { label= ko.observable('dialog test'); editedPerson= ko.observable(null); clearPerson= function() { editedPerson(null); }; newPerson= function() { editedPerson(new person()); }; savePerson= function() { alert('Person saved!'); clearPerson(); }; return { label: label, editedPerson: editedPerson, clearPerson: clearPerson, newPerson: newPerson, savePerson: savePerson, }; } var vm = viewModel(); ko.applyBindings(vm); 
 .header { font-size: 16px; font-family: sans-serif; font-weight: bold; margin-bottom: 20px; } 
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"/> <h1 class="header" data-bind="text: label"></h1> <div id="dialog" data-bind="with: editedPerson, withDialog: {autoOpen: false, title: 'Dialog test', close: function() { alert('closing');} }"> Person editor<br/> Name:<br/><input type="text" data-bind="value: $data.name"/><br/> Age:<br/><input type="text" data-bind="value: $data.age"/><br/> <button data-bind="click: $parent.savePerson">Ok</button> <button data-bind="click: $parent.clearPerson">Cancel</button> </div> <div> <button data-bind="click: clearPerson">Clear person</button> <button data-bind="click: newPerson">New person</button> </div> <hr/> <div data-bind="text: ko.toJSON($root)"></div>