Ko learning focus

Summarized some knockout knowledge points

Bind Model
Ko. applybindings (viewmodel); // global application
Ko. applybindings (viewmodel, Dom element); // partial application

 

Assignment
VaR vmodel = {

This. firstname = Ko. observable ();
};
Vmodel. firstname ();
Vmodel. firstname ("newvalue ");

 

Subscribe to change events
Vmodel. firstname. subscribe ();
Vmodel. firstname. subscribe (function (newvalue) {alert ("changed:" + newvalue );});

Delete subscription
VaR subscribe = vmodel. firstname. subscribe (function (newvalue ){});
Subscribe. Dispose ();

 

Ko. Computed usage 1 (input this method)
VaR vmodel = {
This. firstname = Ko. observable ();
This. lastname = Ko. observable ();
This. fullname = Ko. Computed (function (){
Return this. firstname () + "" + this. lastname ();
}, This); // note the input of this
};

 

Ko. Computed usage 1 (this is not input)
Function viewmodel ()

{< br> var self = This; // key point
self. firstname = Ko. observable ();
self. lastname = Ko. observable ();
self. fullname = Ko. computed (function () {
return self. firstname () + "" + self. lastname ();
});
}

// Write the read/write Splitting Method for the KO. Computed attribute
This. fullname = Ko. Computed ({
Read: function () {return xxxxxxxxxxx ;},
Write: function (value) {// break down the value and save it to firstname, lastname },
Owner: This
});

 

Several functions for determining model attributes
Ko. iscomputed

Ko. isobservable

Ko. iswritableobservable

 

 

Ko template: foreach
<Table>
<Tbody data-bind = "foreach: People">
<Tr>
<TD data-bind = "text: firstname"> </TD>
<TD data-bind = "text: lastname"> </TD>
</Tr>
</Tbody>
</Table>
<SCRIPT>
VaR peoplelist = Ko. observablearray ([
{Firstname: "xxxx1", lastname: "yyyyyy1 "},
{Firstname: "xxxx2", lastname: "yyyyyy2 "}
]);
VaR vmodel = {
People = Ko. observablearray (peoplelist)
};
Ko. applybindings (vmodel );
</SCRIPT>

 

The as usage of foreach is like multiple repeater in Asp.net, which defines an alias.

Foreach annotation loop writing

Foreach's AOP, (adding effects, jquery), is the processing of front and back events such as before and after of the template method.

 

Template: If: variable name, no container writing (comment writing)

<! -- Ko if: someexpressiongoeshere -->
<! --/KO -->
<! -- Ko foreach: items -->
<! --/KO -->

 

With usage, the same purpose as in VB

 

Prevent the event from being passed up: clickbubble: false
Data-bind = "click: fnname, clickbubble: false"

 

Form submit can detect the carriage return event, so you do not need to click the event
<Form data-bind = "Submit: validateinput">
Xxx
<Input type = "Submit" value = "OK"/>
</Form>

 

Real-time model attribute tracking
Data-bind = "value: V1, valueupdate: 'afterkeylow '"

 

Custom binding

 

JSON
Ko. tojs: Copies the observable model to a JS object without observable.
Ko. tojson: Call KO. tojs and use the browser's JSON. serialize function to convert the JS object to a JSON string.
If the browser does not support local JSON, you must reference json2.js to make the KO. tojson function normal.

Operations after obtaining JSON data from the server:
VaR parsed = JSON. parse (somejson );
Vmodel. firstname (parsed. firstname );

 

 

The Ko source code is being interpreted. Please wait... Haha