(iii) Use of Knockout-viewmodel 2-select application

Drop-down menu

<select> commonly used Data-bind parameters:

•Options:

Point to an array or Ko.observablearray (), KO converts the array element to a drop-down option. If it is Ko.observablearray (), when the array element is dynamically added or removed, the drop-down option is also immediately followed.

•Optionstext, Optionsvalue:

The array element used to produce the drop-down option can be a JavaScript object with multiple properties, and by Optiontext, OptionValue sets the property name string, which we can specify which property to use as the text content of <option>. Which property is treated as value.

•Value:

A specific property that points to a ViewModel property, which is generally declared with ko.observable (). So the drop-down menu selects the new value, and the selected <option> value value is updated to the ViewModel property, and once the property is modified by the program or changed by the user input, the drop-down menu is automatically cut to the <option > option for the new value.

•selectedoptions:

<select>,selectedoptions for multi-select (multiple) can be bound to the Ko.observablearray () Type property, which enables immediate reaction to the collection of items selected by the consumer , and changing the element item of the Obervablearray array will also change the selected state of the corresponding option immediately.

DEMO1

Using static data binding

<select data-bind = "options:selectoptions, Optionstext: ' Name ', Optionsvalue: ' id ', value:result" ></select ><br/> rank: <span data-bind = "Text:result" ></span ><br/><input type = "button"  Value = "Third"  Data-bind = "Click:changetoyoung"/>

var Myviewmodel = function() {    var me = this;    Me.selectoptions = [            {name: "First", Id:1},            {name: "Second", Id:2},            {name: "Third", Id:3} ]; Me.result = ko.observable (2); You can only detect the property of value Me.changetoyoung = function() {Me.result (3),//ko.observable () Declaration, and change its value using the PropName ("...") method. To notify the relevant UI to produce a linkage effect }}ko.applybindings (New Myviewmodel ());       

Analytical:

-ViewModel defines the selectoptions array (assuming that the option does not change dynamically, so you can use a general array, without Ko.observablearray), the array element object has T, v two attributes respectively as the text and value of <option>, The drop-down menu selection results are reflected in the result ko.observable () attribute

-to observe the selected results, add a <span data-bind= "Text:result" > Instant response result content.

-Declares a chagetophone () function, forcing the value of result to be specified as "third".

DMEO2

Dynamic Data binding

The options option in <select> Data-bind if bound to Ko.observablearray (), you can dynamically add an option effect, that is, you can use it to accomplish common cascading effects.

var function () {   varthis;    // use Observablearray to bind to dynamically change option options   Me.selectoptions = Ko.observablearray ([        "text": "Please select", "Value": "0" }   ]);    = Ko.observable ("0"); // Add result monitoring property with initial binding value of 0}

var New ViewModel (); ko.applybindings (VM); $ ("#btnAddItem"). Click (function  () {   Vm.selectOptions.push ({       "text": $ ("#txtOptText"). Val (),       "value": $ ("#txtOptValue"). val ()   });});

<Selectstyle= "background-color:activecaption;width:100px"
Data-bind= "Options:selectoptions, Optionstext: ' Text ', Optionsvalue: ' Value ', Value:result"></Select>Value=
<spanData-bind= "Text:result"></span><Div>Text:<inputID= "Txtopttext"value= "Option 1"/></Div><Div>Value:<inputID= "Txtoptvalue"value= "1" /></Div><inputtype= "button"value= "New Options"ID= ' Btnadditem '/>

(iii) Use of Knockout-viewmodel 2-select application