o_19mgorv9t13a3ko71fev19l81mqa.pdf

Underpinning the Ajax functions is the model, which I defined like this:
...
var model = {
reservations: ko.observableArray()
};
...
Knockout works by creating observable objects that it monitors for changes and uses to update the HTML displayed by the
browser. My model is simple. It consists of an observable array, which is just like a regular JavaScript array, but is wired up so
that any changes I made are detected by Knockout. You can see how I use the model in the Ajax functions, like this:
...
function getAllItems() {
sendAjaxRequest("GET", function(data) {
model.reservations.removeAll();
for (var i = 0; i < data.length; i++) {
model.reservations.push(data[i]);
}
});
}
...
The two statements I highlighted are how I get the data from the server into the model. I call the removeAll method to
remove any existing data from the observable array and then iterate through the results I get from the server with the push
method to populate the array with the new data.
Defining the Bindings
Knockout applies changes in the data model to HTML elements via data bindings. Here are the most important data bindings in the
Index view:
...
Remove
...
Knockout is expressed using the data-bind attribute and there is a wide range of bindings available, three of which I have
used in the view. The basic format for a data-bind attribute is:
data-bind="type: expression"
The types of the three bindings in the listing are foreach, text and click, and I picked these three because they
represent the different ways in which Knockout can be used.
The first two, the foreach and text bindings, generate HTML elements and content from the data model. When the
foreach binding is applied to an element, Knockout generates the child elements for each object in the expression, just like the
Razor @foreach that I was using in the partial view.
720