knockout.js
AJAX के अनुरोध और बाध्यकारी

नमूना AJAX के अनुरोध w / बाध्यकारी

page.html

<div data-bind="foreach: blogs">
    <br />
    <span data-bind="text: entryPostedDate"></span>
    <br />
    <h3>
        <a data-bind="attr: { href: blogEntryLink }, text: title"></a>
    </h3>
    <br /><br />
    <span data-bind="html: body"></span>
    <br />
    <hr />
    <br />
</div>

<!--- include knockout and dependencies (Jquery) --->
<script type="text/javascript" src="blog.js"></script>

blog.js

function vm() {
    var self = this;

    // Properties
    self.blogs = ko.observableArray([]);

    // consists of entryPostedDate, blogEntryLink, title, body
    var blogApi = "/api/blog";

    // Load data
    $.getJSON(blogApi) 
        .success(function (data) {
            self.blogs(data);
        });
    }
ko.applyBindings(new vm());

ध्यान दें कि अनुरोध करने के लिए JQuery का उपयोग किया गया था ( $.getJSON(...) )। वेनिला जावास्क्रिप्ट एक ही प्रदर्शन कर सकते हैं, और अधिक कोड के साथ।

AJAX अनुरोध के दौरान "लोड हो रहा है अनुभाग / अधिसूचना"

Blog.html

<div data-bind="visible: isLoading()">
    Loading...
</div>

<div data-bind="visible: !isLoading(), foreach: blogs">
    <br />
    <span data-bind="text: entryPostedDate"></span>
    <br />
    <h3>
        <a data-bind="attr: { href: blogEntryLink }, text: title"></a>
    </h3>
    <br /><br />
    <span data-bind="html: body"></span>
    <br />
    <hr />
    <br />
</div>

<!--- include knockout and dependencies (JQuery) --->
<script type="text/javascript" src="blog.js"></script>

blog.js

function vm() {
    var self = this;

    // Properties
    self.blogs = ko.observableArray([]);
    self.isLoading = ko.observable(true);

    // consists of entryPostedDate, blogEntryLink, title, body
    var blogApi = "/api/blog";

    // Load data
    $.getJSON(blogApi) 
        .success(function (data) {
            self.blogs(data);
        })
        .complete(function () {
            self.isLoading(false); // on complete, set loading to false, which will hide "Loading..." and show the content.
        });
}
ko.applyBindings(new vm());

ध्यान दें कि अनुरोध करने के लिए JQuery का उपयोग किया गया था ($ .getJSON (...))। वेनिला जावास्क्रिप्ट एक ही प्रदर्शन कर सकते हैं, और अधिक कोड के साथ।