knockout.js => बाइंडिंग

वाक्य - विन्यास


<i data-bind="if:myObservable"></i>

टिप्पणियों

क्या बंधन है

अनिवार्य रूप से एक बाइंडिंग या डेटा बाइंडिंग आपके ViewModels को आपके दृश्य (टेम्प्लेट) से जोड़ने और इसके विपरीत करने का एक तरीका है। KnockoutJS दो-तरफ़ा डेटा बाइंडिंग का उपयोग करता है, जिसका अर्थ है कि आपके ViewModel में परिवर्तन दृश्य को प्रभावित करते हैं और आपके View में परिवर्तन ViewModel को प्रभावित कर सकते हैं।

हुड के तहत (संक्षिप्त अवलोकन)

बाइंडिंग केवल प्लगइन्स (स्क्रिप्ट) हैं जो आपको किसी विशेष कार्य को हल करने की अनुमति देते हैं। यह कार्य आपके ViewModel के अनुसार मार्कअप (html) नहीं बदलने से अधिक बार होता है।

उदाहरण के लिए, एक text बाइंडिंग आपको पाठ प्रदर्शित करने और गतिशील रूप से इसे बदलने की अनुमति देता है जब भी आपका ViewModel बदलता है।

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

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

एक कस्टम बाइंडिंग के निम्नलिखित उदाहरण पर विचार करें:

ko.bindingHandlers.debug = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.computed(function () {
            var value = ko.unwrap(valueAccessor());
    
            console.log({
                value: value,
                viewModel: viewModel,
                bindingContext: bindingContext
            });
        }, null, { disposeWhenNodeIsRemoved: element });
    }
};

एक बंधन का एक नाम है - debug ताकि आप निम्नानुसार उपयोग कर सकें:

data-bind="debug: 'foo'"

बाइंडिंग शुरू होने पर init विधि को एक बार कहा जाता है। बाकी अपडेट को एक अनाम गणना द्वारा नियंत्रित किया जाता है जिसे element हटाए जाने पर निपटाया जाता है।
कई चीजों को सांत्वना देने के लिए बाइंडिंग प्रिंट: हमारे उदाहरण में यह दिया गया मान foo (यह मान भी अवलोकन योग्य हो सकता है क्योंकि ko.unwrap विधि का उपयोग इसे पढ़ने के लिए किया जाता है), वर्तमान दृश्यमॉडल और बाइंड कॉंटेक्स।
जब भी पारित मूल्य में परिवर्तन होता है तो बंधन अपडेटेड सूचनाओं को कंसोल में प्रिंट करेगा।
इस बंधन का उपयोग वर्चुअल तत्वों (html टिप्पणियों में) के साथ नहीं किया जा सकता है, केवल वास्तविक तत्वों पर, क्योंकि ko.virtualElements.allowedBindings.debug ध्वज को सही पर सेट नहीं किया गया है।

कोष्ठक का उपयोग कब करें

किसी भी अतिरिक्त बिना प्लगइन्स , KnockoutJS ही नहीं नमूदार हैं ViewModel पर गुण (नियमित के लिए लाइव देखें अपडेट होगा observable , लेकिन यह भी computed , pureComputed , observableArray , आदि)। एक अवलोकन योग्य बनाया जाएगा:

var vm = { name: ko.observable("John") };

इस मामले में, vm.name दो अलग "मोड" के साथ एक फ़ंक्शन है :

Getter: vm.name() , बिना तर्क, वर्तमान मूल्य मिलेगा;
सेटर: vm.name("Johnnyboy") , एक तर्क के साथ, एक नया मान सेट करेगा।

अंतर्निहित डेटा-बाइंडिंग में आप हमेशा गेटर फॉर्म का उपयोग कर सकते हैं , और आप कभी-कभी कोष्ठक को छोड़ सकते हैं, और बाइंडिंग प्रभावी रूप से आपके लिए उन्हें "जोड़" देगा। तो ये बराबर हैं:

<p data-bind="text: name"></p> ... will work
<p data-bind="text: name()"></p> ... works too

लेकिन यह विफल हो जाएगा:

<p data-bind="text: 'Hello, ' + name + '!'"></p> ... FAILS!

क्योंकि जैसे ही आप डेटा-बाइंडिंग के लिए वैल्यू पास करने से पहले "कुछ" करना चाहते हैं, जिसमें वैल्यू कम्पेरिजन भी शामिल है, आपको सभी ऑब्जर्वर के मानों को ठीक से "प्राप्त" करने की आवश्यकता है, जैसे:

<p data-bind="text: 'Hello, ' + name() + '!'"></p> ... works

अधिक जानकारी के लिए यह प्रश्नोत्तर भी देखें।

अगर / अगर नहीं

यदि आप यह निर्धारित करने के लिए कि नोड के बाल तत्वों को बनाया जाना चाहिए या नहीं, if बाइंडिंग का उपयोग कर सकते हैं।

<div class="product-info">
    <h2>  Product1  </h2>
    <img src="../products/product1.jpg"/>
    <span data-bind="if:featured">
        <span class="featured"></span>
    </span>
    <span data-bind="ifnot:inStock">
        <span class="out-of-stock"></span>
    </span>
</div>
     
<script>
    ko.applyBindings({
        product: {
            featured: ko.observable(true),
            inStock: ko.observable(false)
        }
    });
</script>

if बाइंडिंग का व्युत्क्रम ifnot

<div data-bind="ifnot: someProperty">...</div>

के बराबर है

<div data-bind="if: !someProperty()">...</div>

कभी-कभी, आप कंटेनर बनाने के बिना तत्वों की उपस्थिति को नियंत्रित नहीं करेंगे (आमतौर पर <li> तत्वों के लिए <ul> या <option> तत्वों के अंदर <select> )

नॉकआउट टिप्पणी टैग के आधार पर कंटेनर रहित नियंत्रण प्रवाह सिंटैक्स के साथ इसे सक्षम करता है:

<select>
  <option value="0">fixed option</option>
<!-- ko if: featured-->
  <option value="1">featured option</option>
<!-- /ko -->
</select>

प्रत्येक के लिए

अन्य भाषाओं में प्रयुक्त रिपीटर्स के समान। यह बाइंडिंग आपको सरणी में प्रत्येक आइटम के लिए HTML के एक ब्लॉक को दोहराने की अनुमति देगा।

<div data-bind="foreach:contacts">
    <div class="contact">
        <h2 data-bind="text:name">
        <p data-bind="text:info">
    </div>
</div>
 
<script type="text/javascript">
    var contactViewModel = function (data) {
        this.name = ko.observable(data.name);
        this.info = ko.observable(data.info);
    };

    ko.applyBindings({
        contacts: [
            new contactViewModel({name:'Erik', info:'[email protected]'}),
            new contactViewModel({name:'Audrey', info:'[email protected]'})
        ]
    });
</script>

ध्यान दें कि जब हम अपने संदर्भ के माध्यम से लूप कर रहे हैं, तो यह सरणी के भीतर आइटम बन जाता है, इस मामले में contactViewModel का एक उदाहरण है। foreach भीतर हमारी भी पहुंच है

$parent - दृश्य मॉडल जिसने इस बंधन को बनाया है
$root - रूट व्यू मॉडल (माता-पिता भी हो सकते हैं)
$data - सरणी के इस सूचकांक में डेटा
$index - प्रस्तुत वस्तु का शून्य आधारित सूचकांक

साथ में

बाध्यकारी के with HTML बाध्य नोड के अंदर एक अलग संदर्भ में बांधता है:

<div data-bind="with: subViewModel">
  <p data-bind="text: title"></p>
</div>

बाध्यकारी के with कंटेनर तत्व के बिना भी उपयोग किया जा सकता है जहां कंटेनर तत्व उपयुक्त नहीं हो सकता है।

<!-- ko with: subViewModel -->
  <p data-bind="text: title"></p>
<!-- /ko -->

var vm = {
  subViewModel: ko.observable()
};

// Doesn't throw an error on the `text: title`; the `<p>` element 
// isn't bound to any context (and even removed from the DOM)
ko.applyBindings(vm);

// Includes the `<p>` element and binds it to our new object
vm.subViewModel({ title: "SubViewModel" });

बाइंडिंग के with template या foreach बाइंडिंग में कई समानताएँ हैं।

दर्शनीय

visible बाइंडिंग style="display: none;" को लागू करके एक तत्व छिपाएगा style="display: none;" यह करने के लिए जब बंधन फाल्सी के रूप में मूल्यांकन करता है।

<input type="text" data-bind="textInput: name"> <span class="error" data-bind="visible: isInvalid">Required!</span>

ko.applyBindings(new ViewModel());

function ViewModel(){
    var vm = this;
  vm.name = ko.observable("test");
  vm.isInvalid = ko.computed(function() {
      return vm.name().length == 0;
  });
}

jsFiddle

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

knockout.js
बाइंडिंग

खोज…