Ko Study Notes

Let's look at Ko's implementation principle mvvm mode, that is, Model-View-view model.

 

At the beginning, I thought mvvm was similar to the MVC mode, but I replaced the Controller with viewmodel without changing the changes. Later I went into details about mvvm and found that there was a difference between the two. For example, in the mvvm Mode Implemented by Ko, its core is "binding", that is, "Binding data" and "binding behavior ". Data Binding means to bind the data defined by viewmodel to the HTML element in the view. It supports bidirectional and unidirectional binding. The data entered on the interface can be captured by viewmodel, the viewmodel can automatically update the data in the view. In this way, you do not need to pay attention to the details of the view (HTML element) when defining the UI processing logic through Js, you only need to operate on your own data. Behavior binding means event registration, that is, binding the HTML element event (such as the Click Event) in the view to the method defined by viewmodel. As shown in:

 

A brief introduction is Ko. It is a declarative binding (data-bind) that associates DOM elements with model data. The UI will be automatically updated based on changes in model data, it can establish an implicit dependency link between model data, and quickly generate a complex and nested UI based on model data functions. It has the following advantages:

1. Bidirectional binding: Views and viewmodels can update data for each other.

2 logic and UI separation: The page data processing logic is completely separated from the HTML element.

3. Easy Maintenance: compared with other JS frameworks, you only need a small amount of code to achieve the requirement, with a small amount of maintenance.

The following describes how to use Ko:

1 define a viewmodel

Function viewmodel (){

VaR self = this;

    self.firstName = ko.observable("Bert");

self.lastName =ko.observable("Bertington");

 

Self. test = function (){

Self. firstname = "test ";

}

}

The observable method can be used to assign values to automatically update the UI page data according to the viewmodel change, and the viewmodel will also update the data in the model based on the UI change. You can use the observablearray method to pass an array. For example:

self.myobservableArray =ko. observableArray ([{ name:"Bungle",type:"Bear" },{ name:"George",type: "Hippo" },{name: "Zippy", type:"Unknown"}]);

If you need to add items dynamically, myobservablearray. push ("some value"), myobservablearray. unshift ("some value"), the difference between the two is that the first to delete the elements at the end of the array, the second to delete the elements at the beginning of the array.

Dynamic deletion items: myobservablearray. Pop (); myobservablearray. Shift (); the first is to delete the elements at the end of the array, and the second is to delete the elements at the beginning of the array.

Reverse the order of the entire array myobservablearray. Reverse ();

Sort the array by myobservablearray. Sort ();

 

2. Add this viewmodel to Ko.

ko.applyBindings(new ViewModel());

3. bind to the DOM Element

<span>First name: <strong data-bind="text:firstName"> </strong></span>

<span>Last name: <strong data-bind="text:lastName">> </strong></span>

Data-bind can be bound to any attribute or method of the DOM element. brackets are not required for binding methods. However, to compute the method, brackets are required. For example

<span>First name: <strong data-bind="click: test"></strong></span>

<span>First name: <strong data-bind="click: test()+‘1‘"> </strong></span>

The above test method implements the calculation of the values of two observable fields. We can use the computed attribute of Ko. It is of the observable type, but it is calculated based on the values of other observable fields)

    self.fullName = ko.computed(function() {

        return self.firstName() + " " + self.lastName();    

}, self);

4. Implement cyclic computing using templates

<div data-bind="template: { name: ‘test-template‘, data: first }"></div>

<div data-bind="template: { name: ‘ test-template‘, data: last }"></div>

 <script type="text/html" id=" test-template">

    

 <p>Credits: <span data-bind="text: credits"></span></p>
</script>
 
<script type="text/javascript">
      function ViewModel() {
            Var self=this;
         self. first = { name: ‘Franklin‘, credits: 99 };
         self. last = { name: ‘Mario‘, credits: 50 };
      }
      ko.applyBindings(new ViewModel());
17 </script>
The key is that the ID in the script must correspond to the name in data-bind.
There is also a way to achieve Loop
function ViewModel() {
        var self=this；
        this.people = [
          { name: ‘Franklin‘, credits: 95 },
          { name: ‘Mario‘, credits: 50 }
      ]
  }
  ko.applyBindings(new ViewModel());
 
 <div data-bind="foreach: people">
     

     <p>Credits: <span data-bind="text: credits"></span></p>
</Div>

Of course, there are many other Ko methods and attributes. For details, refer to http://knockoutjs.com/downloads/index.html.
Ko Study Notes