knockout.js और फ़ायरफ़ॉक्स लॉग इन फॉर्म पर पासवर्ड सहेजें

Question

फ़ायरफ़ॉक्स मेरे उपयोगकर्ता नाम/पासवर्ड के साथ एक फॉर्म पॉप्युलेट करता है। यह इनपुट को बाध्य करने के लिए knockout.js का उपयोग कर रहा है लेकिन यह इस तरह के पॉपुलटिंग पर मान अपडेट नहीं करेगा। क्या मुझे पृष्ठ लोड पर कुछ कहना याद आ रहा है? जब यह पॉप्युलेट हो जाता है और उपयोगकर्ता सबमिट करता है, तो मान खाली होते हैं।

(function (app, $, undefined) { 

    app.viewModel = app.viewModel || {}; 
    app.login = {}; 

    app.viewModel.login = { 
     userName: ko.observable(''), 
     password: ko.observable(''), 
     returnUrl: '' 
    }; 

    app.viewModel.login.submit = function() { 
     sso.login(app.viewModel.login.userName(), app.viewModel.login.password(), app.viewModel.login.returnUrl); 
    }; 

    app.login.init = function (returnUrl) { 

     app.viewModel.login.returnUrl = returnUrl; 

     ko.applyBindings(app.viewModel); 
    }; 

})(window.app = window.app || {}, jQuery); 

Answer 1

तरह से है कि मैं अतीत में इस के साथ निपटा है value बाध्यकारी उस तत्व का वर्तमान मूल्य से मूल्य initializes करने के लिए एक आवरण का प्रयोग है।

ऐसा लगता है (यह एक observables के साथ ही काम करने के लिए सरल है) दिखेगा:

ko.bindingHandlers.valueWithInit = { 
    init: function(element, valueAccessor, allBindingsAccessor, context) { 
     var observable = valueAccessor(); 
     var value = element.value; 

     observable(value); 

     ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, context); 
    }, 
    update: ko.bindingHandlers.value.update 
}; 

तो, आप valueWithInit बजाय value का प्रयोग करेंगे। आपको बस यह सुनिश्चित करने की ज़रूरत है कि स्वत: पूर्ण कार्य करने में सक्षम होने से पहले ko.applyBindings को कॉल नहीं किया जाता है।

http://jsfiddle.net/rniemeyer/TeFAX/

Answer 2

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

मेरे समाधान: जो वास्तव में एक नहीं है, लेकिन मुझे लगता है मैं फिर भी

सरल अद्यतन हमारे मॉडल का हिस्सा सोचा मैन्युअल प्रस्तुत कॉलबैक में लॉगिन करने से पहले। jQuery का उपयोग करके, self.password($("#password").val()) जैसे कुछ ऐसा करना चाहिए।

वैकल्पिक रूप से, मौजूदा बाइंडिंग का उपयोग करके, एक परिवर्तन घटना को ट्रिगर करना भी काम करता है - उदा। $("#password").change()।

सकारात्मक:

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

विपक्ष:

• टूट जाता है फिर से अच्छा जुदाई Knockout.js प्रदान करता है
• एक समाधान नहीं है बल्कि एक समाधान नहीं है

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

बस थोड़ा आगे सोचना - एक ही समस्या तब उत्पन्न होनी चाहिए जब ब्राउज़र किसी भी रूप को स्वत: पूर्ण करता है (उदाहरण के लिए एक पता) - जिसका अर्थ है कि उपर्युक्त कुछ सामान्य कार्य सामान्य होगा (शायद परिवर्तन ट्रिगर को कॉल करना प्रपत्र के प्रत्येक इनपुट क्षेत्र) पर

संपादित करें:

<form id="myForm" data-bind="submit: login"> 
    Email: <input type="text" data-bind="value: email" /><br/> 
    Password: <input type="password" data-bind="value: password" /><br/> 
    <button type="submit">Login</button> 
</form> 

: कुछ त्वरित कोड विचार

एचटीएमएल का प्रदर्शन और जावास्क्रिप्ट:

function ViewModel() { 
    var self = this; 

    self.email = ko.observable(""); 
    self.password = ko.observable(""); 

    self.login = function() { 
     $("#myForm").find("input").change(); 

     //Now the observables contain the recent data 
     alert(ko.mapping.toJSON(self)); 
    }; 
} 

Answer 3

बस कुछ अतिरिक्त जानकारी के लिए

:

एक ही बात हो रहा है नेट MVC 5 एसपीए टेम्पलेट में।

मैं observables को इनपुट मानों फिर नियत से यह तय होने के ठीक पहले लॉगिन exectuted है:

login.viewmodel.js में

// Operations 
self.login = function() { 
    self.userName($("#LoginUserName").val()); 
    self.password($("#LoginPassword").val()); 

    //original