knockout.js
बाइंडिंग - पाठ और उपस्थिति

टेक्स्ट

text बाइंडिंग का उपयोग किसी भी तत्व के साथ किया जा सकता है ताकि यह इनरटेक्स्ट हो।

<p>
  <span data-bind="text: greeting"></span>,
  <span data-bind="text: subject"></span>.
</p>

ko.applyBindings({
  greeting: ko.observable("Hello"),
  subject: ko.observable("world")
});

text बाइंडिंग का उपयोग आभासी तत्वों के साथ भी किया जा सकता है।

<p>
  <!--ko text: greeting--><!--/ko-->, 
  <!--ko text: subject--><!--/ko-->.
</p>

सीएसएस

यह बाध्यकारी आपूर्ति सीएसएस वर्ग को तत्व पर लागू करेगा। स्थैतिक कक्षाओं को तब लागू किया जाता है जब दी गई शर्तें सही-सही मूल्यांकन की जाती हैं। डायनेमिक कक्षाएं एक अवलोकन योग्य या गणना के मूल्य का उपयोग करती हैं।

page.html

<p data-bind="css: { danger: isInDanger }">Checks external expression</p>
<p data-bind="css: { danger: dangerLevel() > 10 }">Expression can be inline</p>
<p data-bind="css: { danger: isInDanger, glow: shouldGlow }">Multiple classes</p>
<p data-bind="css: dynamicObservable">Dynamic CSS class from observable</p>
<p data-bind="css: dynamicComputed">Dynamic CSS class from computed</p>

page.js

ko.applyBindings({
  isInDanger: ko.observable(true),
  dangerLevel: ko.observable(5),
  isHot: ko.observable(true),
  shouldGlow: ko.observable(true),  
  dynamicObservable: ko.observable('highlighted'),
  dynamicComputed: ko.computed(function() {
        var customClass = "";
        if(dangerLevel() >= 15 ) {
            customClass += " danger";
        }
        if(dangerLevel() >= 10) {
            customClass += " glow";
        }
        if(dangerLevel() >= 5) {
            customClass += " highlighted";
        }
        return customClass;
    });
});

page.css

.danger { background: red; }
.glow { box-shadow: 5px 5px 5px gold; }
.highlighted { color: purple; }

इसे भी देखें: आधिकारिक दस्तावेज

दर्शनीय

DOM तत्वों को दिखाने / छिपाने के लिए उपयोग किया जा सकता है। उपयोग करने के समान, if visible को छोड़कर, अभी भी तत्व और सेट display:none निर्माण करेगा display:none ।

<div data-bind="visible: shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.
</div>
 
<script type="text/javascript">
    var viewModel = {
        shouldShowMessage: ko.observable(true);
    };
</script>

aTTR

अपने तत्व में किसी भी अतिरिक्त विशेषताओं को लागू करने के लिए attr बाइंडिंग का उपयोग करें। आमतौर पर एक href, src, या किसी भी डेटा-विशेषताओं को सेट करने के लिए उपयोग किया जाता है।

<img data-bind="attr: { src: url, title: title }"/>

var viewModel = {
    url: ko.observable("images/example.png"),
    title: "example title"
};

एचटीएमएल

यह बाइंडिंग jQuery.html() का उपयोग करते हुए तत्व के jQuery.html() को अपडेट करता है, यदि jQuery को संदर्भित किया गया है, अन्यथा, KO के अपने पार्सिंग लॉजिक। यह एक एपीआई, आरएसएस फ़ीड, आदि से HTML को पुनः प्राप्त करने के लिए उपयोगी हो सकता है। उपयोगकर्ता इनपुट HTML के साथ इस टैग का उपयोग करने के लिए सावधान रहें।

page.html

<p>
  <span data-bind="html: demoLink"></span>
</p>

page.js

ko.applyBindings({
  demoLink: ko.observable("<a href='#'>Make a link</a>")
});