knockout.js
बाइंडिंग - फार्म फ़ील्ड

क्लिक करें

ईवेंट हैंडलर को जोड़ने के लिए click बाइंडिंग का उपयोग किसी भी दिखाई देने वाले DOM तत्व के साथ किया जा सकता है, जब कोई तत्व क्लिक किया जाता है, तो वह एक जावास्क्रिप्ट फंक्शन शुरू करेगा।

<button data-bind="click: onClick">Click me</button>

ko.applyBindings({
  onClick: function(data, event) {
    // data: the context of the element that triggered the event
    console.log(data);

    // event: the click event
    console.log(event);
  }
});

विकल्प

किसी चुनिंदा आइटम के विकल्प बनाने के लिए इस बाइंडिंग का उपयोग करें

<select data-bind="options: gasGiants"></select>
 
<script type="text/javascript">
    var viewModel = {
        gasGiants: ko.observableArray(['Jupiter', 'Saturn', 'Neptune', 'Uranus'])
    };
</script>

तुम भी सूची में प्रदर्शित होने के लिए और ViewModel में बचाने के लिए सरणी के अंदर गुणों का उपयोग कर सकते हैं: optionsText एक कस्टम प्रदर्शन पाठ सक्षम बनाता है

optionsValue संबंधित <option> का मान गुण सेट करता है

value दृश्यमॉडल के अवलोकन में चयनित विकल्प के मूल्य को संग्रहीत करता है

<select data-bind="options: gasGiants, optionsText:'name', optionsValue:'id', value:selectedPlanetId"></select>
 
<script type="text/javascript">
    var viewModel = {
        selectedPlanetId: ko.observable(),
        gasGiants: ko.observableArray([{name:'Jupiter', id:'0'},
                                       {name:'Saturn', id:'1'},
                                       {name:'Neptune', id:'2'},
                                       {name:'Uranus', id:'3'}])
    };
</script>

एक बहु-चयन सूची के परिणामों की दुकान के लिए, विकल्प बाध्यकारी साथ जोड़ा जा सकता selectedOptions बंधन।

<select data-bind="options: gasGiants, selectedOptions: chosenGasGiants" multiple="true"></select>

<script type="text/javascript">
    var viewModel = {
        gasGiants: ko.observableArray(['Jupiter', 'Saturn', 'Neptune', 'Uranus'])
        chosenGasGiants: ko.observableArray(['Jupiter','Saturn']) // Initial selection
    }; </script>

अक्षम सक्षम

अक्षम किया गया बंधन एक html तत्व में एक disabled विशेषता जोड़ता है जिसके कारण यह अब संपादन योग्य या क्लिक करने योग्य नहीं है। यह मुख्य रूप से <input> , <select> , <textarea> , <a> और <button> तत्वों के लिए उपयोगी है

<input data-bind="disabled: disableInput"/> 

<script type="text/javascript">
var viewModel = {
    disableInput: ko.observable(true);
};
</script>

disabled बाइंडिंग का उलटा enabled

जावास्क्रिप्ट कार्यों का उपयोग करके दृश्यता की गणना भी की जा सकती है। इस कार्य में उपयोग किए जाने वाले किसी भी वेधशाला को कोष्ठक के साथ कहा जाता है

<script type="text/javascript">
var viewModel = {
    disableInput: ko.observable(true);
};
</script>

या

<input data-bind="disabled: allValues().length>4"/> 

<script type="text/javascript">
var viewModel = {
    allValues: ko.observableArray([1,2,3,4,5]);
};
</script>

प्रस्तुत

जब कोई DOM तत्व सबमिट किया जाता है तो ईवेंट हैंडलर को आमंत्रित किया जाता है।

<form data-bind="submit: doSomething">
    <!-- form content here -->
    <button type="submit"></button>
</form>

<script type="text/javascript">    
    var vm = { 
        doSomething: function(data){
            //do something here
        }; 
    }
</script>

नॉकआउट उस फ़ॉर्म के लिए ब्राउज़र की डिफ़ॉल्ट सबमिट कार्रवाई को रोक देगा। यदि आप चाहते हैं कि आपका फ़ॉर्म सामान्य HTML फ़ॉर्म की तरह सबमिट किया जाए, तो आप सबमिट हैंडलर में true रिटर्न करते हैं।

मूल्य

किसी तत्व का मान प्राप्त करने के लिए मूल्य बाइंडिंग का उपयोग करें। वैल्यू बाइंडिंग को किसी भी रूप नियंत्रण पर लागू किया जा सकता है, हालांकि अन्य बाइंडिंग हैं जो चेकबॉक्स, रेडियो बटन और टेक्स्ट इनपुट के लिए बेहतर अनुकूल हो सकते हैं।

निम्न उदाहरण दिखाता है कि बाध्यकारी तत्व को कई फॉर्म इनपुट फ़ील्ड में कैसे लागू किया जाए, और डिफ़ॉल्ट मान कैसे पॉप्युलेट करें:

ViewModel परिभाषा:

var MyViewModel = function(){
    var self = this;
  //Initialize valueOne
  self.valueOne = ko.observable();
  //Initialize valueTwo with a default value of "Value two"
  self.valueTwo = ko.observable("Value two");
  //Initialize the color dropdown, and by default, select the "blue" option
  self.color = ko.observable("blue");
  
  self.valueOne.subscribe(function(newValue){
      console.log("valueOne: " + newValue);
  });
  
  self.valueTwo.subscribe(function(newValue){
      console.log("valueTwo: " + newValue);
  });
  
  self.color.subscribe(function(newValue){
      console.log("color: " + newValue);
  });
}

संबद्ध मार्कअप:

<input type="text" data-bind="value: valueOne" />
<input type="text" data-bind="value: valueTwo" />

<select data-bind="value: color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

उपरोक्त उदाहरण में, जब कोई मान बदलता है, तो नया मान कंसोल में लॉग इन किया जाएगा। प्रारंभिक मान परिवर्तन घटना को ट्रिगर नहीं करेंगे।

डिफ़ॉल्ट रूप से, मान बाइंडिंग तत्वों के परिवर्तन के रूप में एक परिवर्तन को परिभाषित करता है, और दूसरे तत्व में स्थानांतरित होने पर ध्यान केंद्रित करता है। यह वैल्यूडेट विकल्प का उपयोग करके बदला जा सकता है:

<input type="text" data-bind="value: valueOne, valueUpdate: 'keyup'" />

उपरोक्त उदाहरण कुंजी अप पर ट्रिगर करने के लिए मूल्य अद्यतन को बदल देगा। उपलब्ध विकल्प इनपुट, कीप, कीप और आफ्टरकेड हैं।