Combining BootstrapTable with KnockoutJS to implement addition, deletion, modification and query functions [1]_javascript skills

inputtext, the text of the input tag, is equivalent to the value attribute of the input tag.

　　<div> 
姓名：<label data-bind="text:name"></label><br />
职业：<input type="text" data-bind="textinput:profession" />
</div> 
　　　　 //1.定义viewmodel
var myviewmodel = {
name: ko.observable("lilei"),
profession: "软件工程师",
};
//2.激活绑定
ko.applybindings(myviewmodel);

4.2, value

this binding attribute is generally used for input tags, and is basically similar to the inputtext above. it's just that value is more standardized.

there is also a parameter valueupdate used together with value, which indicates that the value is updated when the interface performs an operation. the main values ​​of valueupdate include change/keyup/keypress/afterkeydown, etc. respectively represent text changes, keyboard shrinkage, keyboard press, keyboard press and other operations to update the value of the viewmodel corresponding to value.

姓名：
<input type="text" data-bind="value:name,valueupdate:'keyup'" /><br /> 
　　　　var myviewmodel = {
name: ko.observable("lilei"),
};//2.激活绑定
ko.applybindings(myviewmodel);

the above code indicates that the value attribute of the text box and the name attribute of myviewmodel are updated when the keyboard is retracted.

4.3. checked

checked binding is generally used for checkbox, radio and other form elements that can be selected. it corresponds to the value is of bool type. the usage is basically similar to value, so i won’t repeat the explanation.

4.4. enable

enable binding is generally used to enable label elements, and is generally used to enable form elements. and disabled. contrary to disabled, the corresponding value is also of type bool.

<div>
<input type="text" data-bind="enable:ismen"/>
</div>
<script type="text/javascript">
//1.定义viewmodel
var myviewmodel = {
name: ko.observable("lilei"),
profession: ko.observable("软件工程师"),
age: ko.observable(40),
ismen:ko.observable(true)
};
//2.激活绑定
ko.applybindings(myviewmodel);
myviewmodel.ismen(false);
</script>

because the ismen property becomes false, all corresponding text boxes will appear disabled.

4.5. disabled

is the opposite of enabled, and its usage is similar to enable.

4.6, options

in the above, options were used when using select binding, which represents the select tag. a collection of options, the corresponding value is an array, indicating the data source of this drop-down box. monitoring of this data source can be enabled using observablearray. see above for usage.

4.7, html

text binding is actually the setting and value of the innertext tag, so the same goes for , html binding is also the setting and value of innerhtml. its corresponding value is an html tag.

4.8, css

css binding is to add or delete one or more styles (classes) to dom elements superior. use the format:

<style type="text/css">
.testbold {
background-color:powderblue;
}
</style> 
<div data-bind="css:{testbold:myviewmodel.name()=='lilei'}">aaaa</div> 
var myviewmodel = {
name: ko.observable("lilei"),
profession: ko.observable("软件工程师"),
age:ko.observable(40)
};

the div will display the background color.

if you need to add or remove multiple styles, just make slight changes, such as:

<div data-bind="css:{testbold:myviewmodel.name()=='lilei',testborder:myviewmodel.profession()=='php工程师'}">aaaa</div>

4.9, style

if the function of css binding is to dynamically add or remove class styles to tags, then the function of style binding is to tags dynamically add or remove a style. for example:

<div data-bind="css:{background-color:myviewmodel.name()=='lilei'?'red':'white'}">aaaa</div>

if you are adding or removing multiple ones, use the same css binding method

4.10, attr

attr binding is mainly used to add and remove one or more attributes (including custom attributes) to tags, yonghe and css similar.

4.11. click

click binding means adding the execution method of the click event on the corresponding dom element. can be used on any element.

<div>
<input type="button" value="测试click绑定" data-bind="click:clickfunc" />
</div> 
　　　　var myviewmodel = {
clickfunc:function(){
alert($(event.currenttarget).val());
}
};
ko.applybindings(myviewmodel);

event.currenttarget represents the currently clicked dom element. sometimes for simplicity, we directly use anonymous functions to bind, such as:

<div>
<input type="button" value="测试click绑定" data-bind="click:function(){
alert('点击了');
}" />
</div>

however, this way of writing js into html is difficult for bloggers to accept, and they find it relatively inconvenient to maintain, especially when the logic in the click event is slightly complicated. therefore, it is not recommended to write this anonymous function directly unless necessary.

4.12, others

for all bindings of data-bind, you can see the introduction on the official website, here not listed one by one. when you need to use it, just check it on the official website. take a look at all the bindings listed on the official website

5. conversion and conversion of json objects and monitoring attributes relationship

we know that in order to avoid direct presentation in different languages, we generally use json format data when interacting with the front end and back end. we retrieve it from the back end through http requests. to use some of the features of our ko, we must convert these ordinary data models into ko's monitoring attributes; in turn, when we use ko's monitoring attributes, sometimes we need to convert these attributes into ordinary the json data is transferred to the background, so how to achieve this conversion?

5.1. convert json object into viewmodel

for example, we get a json object from the background and then change it into into our viewmodel, and then bound to our interface dom.

$.ajax({
url: "/home/getdata",
type: "get",
data: {},
success: function (data, status) {
var ojson = data;
}
});

we send a request to the backend, get a json object, assign it to ojson, and then we convert ojson into viewmodel, the most intuitive way is to convert manually. for example, we can do this:

　　　　var myviewmodeljson = {
deptname: ko.observable(),
deptlevel: ko.observable(),
deptdesc:ko.observable()
};
ko.applybindings(myviewmodeljson);

then in the success of the ajax request

success: function (data, status) {
var ojson = data;
myviewmodeljson.deptname(ojson.deptname);
myviewmodeljson.deptlevel(ojson.detplevel);
myviewmodeljson.deptdesc(ojson.deptdesc);
}

in this way, through manual binding, the binding of the json object to the viewmodel is achieved. the advantage of this is flexibility, but the disadvantage is obvious that the amount of manual code is too large.

fortunately, with our omnipotent open source, someone will always come up with a better way. we can use the knockout.mapping component to help us convert the interface json object to the viewmodel.

knockout.mapping open source address: download

let’s take a brief look at how to use it. it’s still the above example. we don’t need to implement any viewmodel definition. first you need to reference knockout.mapping.js

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>

note: here knockout.mapping-lastest.js must be placed in knockout-3.4. 0.min.js, otherwise ko.mapping cannot be called.

then use it directly in the success function

　　　　　　　　　success: function (data, status) {
var myviewmodeljson2 = ko.mapping.fromjs(data);
ko.applybindings(myviewmodeljson2);
}

code explanation: request from the json object obtained in the background can be easily converted into a viewmodel through ko.mapping.fromjs(). isn’t it sharp! of course, in addition to this usage, you can also update the existing viewmodel as follows:

　　　　var myviewmodeljson = {
deptname: ko.observable(),
deptlevel: ko.observable(),
deptdesc:ko.observable()
};
ko.applybindings(myviewmodeljson);
$(function () {
$.ajax({
url: "/home/getdata",
type: "get",
data: {},
success: function (data, status) {
ko.mapping.fromjs(data, myviewmodeljson)
}
});
});

in success, update the myviewmodeljson viewmodel according to the value of data.

5.2. convert viewmodel into json object

the above said that json object is converted into viewmodel, then conversely, if we need to convert the viewmodel into a json object and pass it to the backend. what should we do?

knockout provides two methods:

•ko.tojs( ): convert the viewmodel to a json object
•ko.tojson(): convert the viewmodel to a serialized json string.

for example, our code is as follows:

$(function () {
var ojson1 = ko.tojs(myviewmodeljson);
var ojson2 = ko.tojson(myviewmodeljson);
});
var myviewmodeljson = {
deptname: ko.observable("研发部"),
deptlevel: ko.observable("2"),
deptdesc: ko.observable("开发一伙人")
};
ko.applybindings(myviewmodeljson);

then let’s monitor the values ​​of ojson1 and ojson2

code explanation: what needs to be explained here is that these two methods come with ko and do not require the support of the mapping component.

6. create your own data-bind attribute

above having said so much, they all introduce some binding and monitoring in knockout. so, sometimes, we need to customize our data-bind, such as: , this this kind of requirement is especially useful when encapsulating components. can it be realized? sure.

in knockout, the ko.bindinghandlers attribute is provided for customizing the data-bind attribute. its syntax is as follows:

ko.bindinghandlers.myselect = {
init: function (element, valueaccessor, allbindingsaccessor, viewmodel) {
},
update: function (element, valueaccessor, allbindingsaccessor, viewmodel) {
}
};

just declare it like this, and then you can use custom data-bind in our html tag.

<div> 
<select data-bind="myselect:$root">
<option id="1">研发部</option>
<option id="2">人事部</option>
<option id="3">行政部</option>
</select>
</div>

myselect is our custom binding property, and $root can be understood as initialization for the time being (although this explanation is not rigorous, if if there is a more reasonable explanation, please correct me).

code explanation: custom binding attributes can be easily implemented through the above ko.bindinghandlers. two points need to be explained:

•init, as the name suggests, initializes custom binding defined, it contains multiple parameters, the first two parameters are generally used more often, the first parameter represents the initialization of the custom bound dom element, and the second parameter is generally used to pass the initialization parameters.
•update, update callback, will enter this method when the corresponding monitoring attribute changes. if no callback is required, this method can be left undeclared.

here, the blogger will briefly explain the use of custom binding based on the previously shared drop-down box component mutiselect.

6.1. the simplest mutiselect

generally, if we need to use ko to encapsulate some common components, we need to use our ko.bindinghandlers. the following blogger will explain how to use it in conjunction with the mutiselect component.

first declare the custom ko.bindinghandlers and initialize our select tag in the init method

ko.bindinghandlers.myselect = {
init: function (element, valueaccessor, allbindingsaccessor, viewmodel) {
$(element).multiselect();
},
update: function (element, valueaccessor, allbindingsaccessor, viewmodel) {
}
};

then use

<div style="text-align:center;"> 
<select data-bind="myselect:$root">
<option id="1">研发部</option>
<option id="2">人事部</option>
<option id="3">行政部</option>
</select>
</div>

the last third part, activate binding

$(function () {
var multiselect = {};
ko.applybindings(multiselect);
});

if you do not need to pass parameters, you only need to bind an empty viewmodel here. some people are confused, the third part seems to have no practical significance. the blogger's understanding is that dom elements need to use data-bind to bind data, and ko binding must be enabled, which is ko.applybindings() here.

the first step is to customize ko.bindinghandlers

ko.bindinghandlers.myselect = {
init: function (element, valueaccessor, allbindingsaccessor, viewmodel) {
var oparam = valueaccessor();
$(element).multiselect(oparam);
},
update: function (element, valueaccessor, allbindingsaccessor, viewmodel) {
}
};

the second step is the same as above, in the html tag this custom binding is used inside.

the third step is to pass in the parameters when activating the binding

$(function () {
var MultiSelect = {
enableClickableOptGroups: true,//收起分组
onChange: function (option, checked) {
alert("选择改变");
}
};
ko.applyBindings(MultiSelect);
});

through this three steps can pass the parameters to the initialization of our mutiselect:

code explanation: the second parameter of the init event, we said, its main function is to obtain the parameters passed in our viewmodel, but it is used as a method here. why it is used in this way remains to be studied!

2. the first example of adding, deleting, modifying and checking

so far the basics are finally laid out. i originally planned to finish it in one article, but i didn’t expect that the basics would be spread out in so many pages! the example of adding, deleting, modifying and checking will be placed in the next article. bootstraptable is combined with knockoutjs to implement the adding, deleting, modifying and checking functions [2]. learning and exchange are welcome, and of course recommendations are welcome!