Knockoutjs (1)-Data model

Objective

When it comes to the data Model (ViewModel), you have to mention the MVVM pattern, and people exposed to WPF and Silverlight should be familiar with the pattern.

Unfamiliar is not much of a relationship, because the use of Knockoutjs is relatively simple.

MVVM and the View Models

Model-view-view model (MVVM) is a design pattern that creates a user interface.

By dividing the UI interface into the following 3 parts, you can make complex interfaces simple:

1. Model, which is used to store your application data, which represents objects and data operations in your business area (e.g., banks can make money transfers) and is independent of any interface.

When using KO, it is common to use AJAX to request data from the server to read and write the data model.

2. View model, a data model purely for describing data content and page operations. For example, if you want to implement a list editor, your ViewModel (data model) is the project manifest object and the method you expose to add and delete list items.

Note: This is not the UI itself, it does not have any concept of buttons and display styles. This is not a persisted data model-it is only the unsaved data that the user is currently using.

When using KO, your view model (the data model) is purely a JavaScript object that does not contain HTML knowledge, keeping the view model (data Model) abstraction simple to use, so you can manage more complex behaviors with simpler operations.

3, view, represents a visible, interactive UI interface for the view model state.

It is used primarily to display the data information of the view model, to send user commands (for example, when the user taps the button) and to maintain automatic updates when the view model changes.

When using KO, your view layer is basically simply binding the HTML document declaratively to the view Model and associating them.

Alternatively, you can use the template to get data from the view model to dynamically generate HTML.

General use steps

1. Using KO to create a view Model, simply declare a JavaScript object, for example:

var myviewmodel = {    'Bob',    123};

2. Create a simple view declarative binding to this view model, for example, the following code shows the value of PersonName:

 is <span data-bind="text:personname"></span>

3. Activating the knockout Data-bind property is not an HTML intrinsic object, but using it is perfectly correct (this is fully compliant with HTML5, although there is a validator stating that this is a property that cannot be verified, but using it in HTML4 does not cause any problems). But the browser does not know what it means, so you need to activate knockout to make it effective.

To activate knockout, simply add the following code to the <script> tag:

Ko.applybindings (Myviewmodel);

You can put this code at the bottom of the document, or put it on top of the $ function method that the DOM handles to complete such as jquery .

When the above operation is complete, your view (page) displays the same content as the following HTML code:

 is <span>Bob</span>

ko.applybindings Using Parameters

The first parameter is the view model object used for declarative binding when you want to activate KO;

The second parameter (optional), you can use the second parameter to set the HTML element or container to use the Data-bind property. For example:

Ko.applybindings (Myviewmodel, document.getElementById ('someelementid'))

 

It restricts only elements with ID someelementid to activate the KO feature, which is advantageous when you declare multiple view model in a page to bind different interface areas.

Knockoutjs (1)-Data model