knockout.js ट्यूटोरियल
शुरुआत नॉकआउट से हुई

AngularJS ASP.NET asp.net-mvc C# Language CSS HTML JavaScript jQuery twitter-bootstrap TypeScript

टिप्पणियों

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

यह नॉकआउट.जेएस के भीतर किसी भी बड़े विषयों का उल्लेख करना चाहिए, और संबंधित विषयों के लिए लिंक करना चाहिए। चूंकि नॉकआउट.जेएस के लिए दस्तावेज़ीकरण नया है, इसलिए आपको उन संबंधित विषयों के प्रारंभिक संस्करण बनाने की आवश्यकता हो सकती है।

संस्करण

संस्करण	टिप्पणियाँ	रिलीज़ की तारीख
3.4.2	कंप्यूटर प्रोग्राम या प्रणाली में बग को दूर करना	2017/03/06
3.4.1	कंप्यूटर प्रोग्राम या प्रणाली में बग को दूर करना	2016/11/08
3.4.0		2015/11/17
3.3.0		2015/02/18
3.2.0	प्रस्तुत `component` बाइंडिंग	2014-08-12
3.1.0		2014-05-14
3.0.0	यह भी देखें: उन्नयन (2.x से) नोट	2013-10-25
2.3.0	अंतिम 2.x रिलीज	2013-07-08
2.0.0		2011-12-21
1.2.1	पिछले 1.x रिलीज	2011-05-22
1.0.0		2010-07-05

स्थापना या सेटअप

नॉकआउट अधिकांश जावास्क्रिप्ट प्लेटफार्मों पर या एक स्टैंडअलोन स्क्रिप्ट के रूप में उपलब्ध है।

स्क्रिप्ट के रूप में शामिल करें

आप स्क्रिप्ट को इसके डाउनलोड पृष्ठ से डाउनलोड कर सकते हैं, फिर इसे अपने पेज में एक मानक script tag साथ शामिल कर सकते हैं

<script type='text/javascript' src='knockout-3.4.0.js'></script>

CDN का उपयोग करना

आप Microsoft CDN, या CDNJS में से नॉकआउट भी शामिल कर सकते हैं

<script type='text/javascript' src='//ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>

या

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>

Npm से स्थापित करें

npm install knockout

वैकल्पिक रूप से आप इसे अपने package.json में रखने के लिए --save पैरामीटर जोड़ सकते हैं। --save फ़ाइल

बोवर से स्थापित करें

bower install knockout

वैकल्पिक रूप से आप इसे अपने bower.json फ़ाइल में रखने के लिए --save पैरामीटर जोड़ सकते हैं

NuGet से इंस्टॉल करें

Install-Package knockoutjs

शुरू हो रही है: नमस्ते दुनिया!

HTML डॉक्यूमेंट बनाना और नॉकआउट को सक्षम करना

एक HTML फ़ाइल बनाएँ और एक <script> टैग के माध्यम से knockout.js शामिल करें।

<!DOCTYPE html>
<html>
<head>
    <title>Hello world! (knockout.js)</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
</body>
</html>

नॉकआउट स्क्रिप्ट के तहत दूसरा <script> टैग जोड़ें। इस स्क्रिप्ट टैग में, हम एक व्यू मॉडल को इनिशियलाइज़ करेंगे और हमारे डॉक्यूमेंट में डेटा बाइंड करेंगे।

<script>
  var ViewModel = function() {
    this.greeting = ko.observable("Hello");
    this.name = ko.observable("World");

    this.appHeading = ko.pureComputed(function() {
      return this.greeting() + ", " + this.name() + "!";
    }, this);
  };

  var appVM = new ViewModel();

  ko.applyBindings(appVM);
</script>

अब, शरीर में कुछ HTML जोड़कर एक दृश्य बनाना जारी रखें:

<section>
  <h1 data-bind="text: appHeading"></h1>
  <p>Greeting: <input data-bind="textInput: greeting" /></p>
  <p>Name: <input data-bind="textInput: name" /></p>
</section>

जब HTML दस्तावेज़ खोला जाता है और स्क्रिप्ट निष्पादित होती है, तो आपको एक पृष्ठ दिखाई देगा, जो हैलो, वर्ल्ड कहता है ! । जब आप शब्दों को <input> तत्वों में बदलते हैं, तो <h1> टेक्स्ट स्वचालित रूप से अपडेट हो जाता है।

कैसे बनाई गई फ़ाइल काम करती है

नॉकआउट का एक डीबग संस्करण बाहरी स्रोत (cdnjs) से लोड किया गया है

कोड:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>

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

कोड:

var appVM = new ViewModel();

नॉकआउट data-bind विशेषताओं के लिए DOM की जाँच करता है और उपलब्ध दृश्यमॉडल का उपयोग करके UI को अपडेट करता है।

कोड:

ko.applyBindings(appVM);

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

कोड:

<h1 data-bind="text: appHeading"></h1>

गणना की गई वेधशालाएँ

गणना की गई वेधशालाएं वे कार्य हैं जो दृश्य मॉडल पर अन्य वेधशालाओं को "देख" या "प्रतिक्रिया" कर सकते हैं। निम्न उदाहरण दिखाता है कि आप उपयोगकर्ताओं की कुल संख्या और औसत आयु कैसे प्रदर्शित करेंगे।

नोट: नीचे दिए गए उदाहरण से purComputed () ( v3.2.0 में प्रस्तुत ) का उपयोग किया जा सकता है क्योंकि फ़ंक्शन केवल अन्य दृश्य मॉडल गुणों के आधार पर कुछ गणना करता है और एक मूल्य देता है।

<div>
  Total Users: <span data-bind="text: TotalUsers">2</span><br>
  Average Age: <span data-bind="text: UsersAverageAge">32</span>
</div>

var viewModel = function() {

    var self = this;

    this.Users = ko.observableArray([
        { Name: "John Doe", Age: 30 },        
        { Name: "Jane Doe", Age: 34 }
    ]);

    this.TotalUsers = ko.computed(function() {
        return self.Users().length;
    });

    this.UsersAverageAge = ko.computed(function() {
        var totalAge = 0;
        self.Users().forEach(function(user) {
            totalAge += user.Age;
        });
   
        return totalAge / self.TotalUsers();
    });
};

ko.applyBindings(viewModel);

Modified text is an extract of the original Stack Overflow Documentation

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

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