KnockoutJS基础知识(二)

　　工作变更，又走回了wpf，一个来月没有接触web开发了，之前的knockoutjs却不想放弃，继续进行知识的巩固，下个月开始重新走回web开发之路，还是得用回一些习惯了的工具。本次开始接触各绑定元素功能、用法，这些绑定方式是在使用ko过程中用的最多的。

　　本文地址： https://www.cnblogs.com/ckexp/p/9296339.html

　　本文demo地址：https://gitee.com/530521314/koinstance.git

 

 所有绑定元素介绍：

从个人使用过程中应用程度进行排序展示：

1、value：在dom元素与viewmodel对象的属性间建立桥梁，用户编辑控件时viewmodel中对应属性值将自动更新，同样在更新了对应属性后，用户控件展示数据也将自动更新。常用于input、select、textarea等控件；

2、text：绑定到dom元素上，将viewmodel对象的属性的值展示在绑定元素上。常用于p、pre、label、span、th、td等控件使用；

3、click：绑定到dom元素上添加事件句柄，当点击事件被触发时，执行我们定义好的js函数。常用于button、input、a等控件使用。

　　click说明：在绑定函数时，可以指定任意函数，即在viewmodel中声明的函数和在viewmodel之外声明的函数都可被调用，同时在调用viewmodel之内的函数时可以直接写函数名，而无需带上viewmodel对象名。

4、visible:绑定到dom元素上，该元素的隐藏或显示将有viewmodel的属性状态、函数返回值或表达式来决定。

针对前四个绑定元素，简单演示一下功能：

html:

 1 <div>
 2     <label>公司名称</label>
 3     <input type="text" data-bind="value:unitname" /><br />
 4     <label>公司地址</label>
 5     <input type="text" data-bind="value:address" /><br />
 6     <p data-bind="text:'您的公司名称为:'+unitname()+'，公司地址是:'+address()+' .'"></p>
 7     <pre data-bind="text:'您的公司名称为:'+unitname()+'，公司地址是:'+address()+' .'"></pre>
 8     <label data-bind="text:'您的公司名称为:'+unitname()+'，公司地址是:'+address()+' .'"></label><br />
 9     <span data-bind="text:'您的公司名称为:'+unitname()+'，公司地址是:'+address()+' .'"></span><br />
10     <table>
11         <tr>
12             <th data-bind="text:unitname"></th>
13         </tr>
14         <tr>
15             <td data-bind="text:address"></td>
16         </tr>
17     </table>
18     <div data-bind="visible:visiblebutton">
19         <button data-bind="click: updateunitname">修改公司名称为中部星城科技</button><br />
20         <button data-bind="click: updateaddress">修改公司地址为湖南长沙雨花区</button>
21     </div>
22     <div>
23         <button data-bind="click:function(){viewmodel.visiblebutton(false);}">隐藏上面两个按钮</button>
24     </div>
25 </div>

js代码:

 1 <script type="text/javascript">
 2     var viewmodel = {
 3         //value、text
 4         unitname: ko.observable(""),
 5         address: ko.observable(""),
 6 
 7         //click
 8         //viewmodel内js函数
 9         updateaddress: function () {
10             this.address("湖南长沙雨花区");
11         },
12 
13         //visible
14         visiblebutton: ko.observable(true),
15     };
16 
17     //任意js函数
18     function updateunitname() {
19         viewmodel.unitname("中部星城科技");
20     }
21 
22     $(function () {
23         ko.applybindings(viewmodel);//完成绑定
24     });
25 </script>

 动画效果图：

 

5、options：该绑定元素只用于在select中使用，通过关联viewmodel中提供的数组，使得select控件能够展示出数组中的所有项。

　　用法解析：

　　　　options，用于绑定下拉列表中各项，

　　　　可选参数-optionscaption，在默认情形下不想选择任何一个option项时，给予提示语，诸如“---请选择---”、或“---------”之类的，作为默认选项，该项的值为undefined。

　　　　optionstext,用于确定下拉列表中每一项的指定属性作为展示列，并可以在此基础上进行扩展，将指定属性传入函数中加工返回新的展示信息，。

　　　　optionsvalue,用于确定下拉列表中每一项的指定属性作为标识列。

6、checked：绑定到type为checkbox的input控件上，关联viewmodel的属性状态，相互间的变动都会使得双方更新状态，状态有选中和未选中。仅用于input控件指定类型为checkbox时使用。

7、css：将一个或多个class动态绑定到dom元素上，根据具体业务变更绑定的class。常用于class之间大范围样式的切换，通过设计js函数完成指定class是否启用。

　　　　注意：在设计class时如果存在不合法的命名下，如my-class需转换为‘my-class’。

8、style：作用效果小于css，将一个或多个style的值绑定到dom元素上，常用于单个或少数量style变更时使用。

9、attr：更改dom元素的任何属性值，关联viewmodel上对应的attr属性值，便于动态更改展示。

　　　　注意：在取属性名称时如果存在不合法的命名下，如data-something需转换为'data-something'。

针对该五个绑定元素，简单演示一下功能：

html:

 1 <div style="margin-top:50px;">
 2     <style type="text/css">
 3         .testclass {
 4             background-color: #ffd800;
 5             font-size: 16px;
 6         }
 7     </style>
 8     <label>公司类型：</label>
 9     <select data-bind="options:unittypeoptions, optionscaption:'---请选择公司类型---',optionstext: 'text', optionsvalue: 'value', value:choiceunittypevalue"></select><br />
10     <input type="checkbox" data-bind="checked:visiblelabel" /><label data-bind="css: { testclass: visiblelabel}">启用展示</label>
11     <label data-bind="text:'选中值：'+choiceunittypevalue(),visible:visiblelabel"></label><br />
12     <a data-bind="attr: { title: tips},style:{'background-color':visiblelabel()?'red':'white'}">公司官网</a>
13     <button data-bind="click:function(){viewmodel.tips('knockoutjs');}">切换a标签提示信息</button>
14 </div>

js代码:

 1 <script type="text/javascript">
 2     var viewmodel = {
 3         //value、text
 4         unitname: ko.observable(""),
 5         address: ko.observable(""),
 6 
 7         //click
 8         //viewmodel内js函数
 9         updateaddress: function () {
10             this.address("湖南长沙雨花区");
11         },
12 
13         //visible
14         visiblebutton: ko.observable(true),
15 
16         //options
17         unittypeoptions: ko.observablearray([
18             { text: "有限公司", value: "1" },
19             { text: "有限责任公司", value: "2" },
20             { text: "国有独资公司", value: "3" },
21             { text: "股份有限公司", value: "4" }
22         ]),
23         choiceunittypevalue: ko.observable(),
24 
25         //checked
26         visiblelabel: ko.observable(true),
27 
28         //attr
29         tips: ko.observable("hello"),
30     };
31 
32     //任意js函数
33     function updateunitname() {
34         viewmodel.unitname("中部星城科技");
35     }
36 
37     $(function () {
38         ko.applybindings(viewmodel);//完成绑定
39     });
40 </script>

动画效果图：

 

10、html：绑定到dom元素上，并将viewmodel的属性值作为展示，与text用法相同，但不同处在于，html可以将内容中存在的html标记渲染为真实的html内容。(个人建议少用或不用)

11、event：为dom元素的事件添加指定的事件句柄，事件被触发时执行我们定义好的逻辑。常用在keypress、mouseover、mouseout事件上。与click用法一样，可以设置为任意的js函数。

12、submit：绑定在表单上用于提交时拦截默认表单提交动作，执行我们定义好的逻辑，然后真正执行提交操作,该提交表单操作可以是原有form表单提交，也可以是我们设计的表单提交，通过参数设置。仅用于form控件。

13、enable：绑定dom元素自身的启用禁用状态，关联viewmodel的属性状态，来控制该dom元素的启用。常用于input、select、textarea等控件中。

14、disable：与enable功能相同，使用方式相反，当disable为true时将被禁用。常用于input、select、textarea等控件中。

15、selectedoptions：在multi-select列表中,选择一个或多个项，并将选中的项加入到selectedoptions关联的viewmodel的属性数组中。常用于多选项选择。

针对该六个绑定元素，简单演示一下功能：

html:

 1 <div style="margin-top:50px;">
 2     <label>html元素所绑定的内容为：</label>
 3     <label data-bind="html:htmlcontent"></label><br />
 4     <div data-bind="event:{mouseover:buttonkeypress}">
 5         鼠标移入改变html元素绑定内容
 6     </div>
 7     <hr />
 8     <form action="@url.action("createuser")" method="post" data-bind="submit:submitform">
 9         <label>用户名：</label>
10         <input type="text" name="username" data-bind="enable:usernameenable" />
11         <label>密码：</label>
12         <input type="text" name="password" data-bind="disable:passworddisable" />
13         <input type="submit" value="增加" />
14     </form><br />
15     <button data-bind="click:function(){viewmodel.usernameenable(true);}">启用用户名输入</button>
16     <button style="margin-left:10px;" data-bind="click:function(){viewmodel.passworddisable(false);}">启用密码输入</button><br />
17     <hr />
18     <p>
19         <select data-bind="options: companyoptions,selectedoptions: chosencompanies" size="5" multiple="true"></select>
20         <select data-bind="options: chosencompanies," size="5"></select>
21     </p>
22 </div>

js代码：

 1 <script type="text/javascript">
 2     var viewmodel = {
 3           
 4         //html
 5         htmlcontent: ko.observable("<a href='#'>百度一下</a>"),
 6 
 7         //event
 8         buttonkeypress: function () {
 9             this.htmlcontent("keypress事件被触发！");
10         },
11 
12         //submit
13         submitform: function (formelement) {
14             //执行逻辑
15             //执行表单提交
16             //或返回到默认表单提交return true
17             return true;
18         },
19 
20         //enable
21         usernameenable: ko.observable(false),
22 
23         //disable
24         passworddisable: ko.observable(true),
25 
26         //selectedoptions
27         companyoptions: ko.observablearray(['百度', '阿里', '腾讯']),
28         chosencompanies: ko.observablearray(['百度'])
29     };
30 
31     //任意js函数
32     function updateunitname() {
33         viewmodel.unitname("中部星城科技");
34     }
35 
36     $(function () {
37         ko.applybindings(viewmodel);//完成绑定
38     });
39 </script>

动画效果图：

16、uniquename：绑定dom元素有一个非空的name属性，在没有设置name属性下，会绑定上一个而唯一的name属性。(使用场景太少，个人还没有使用过)

 

0、foreach: 绑定到dom元素上，将关联的viewmodel中指定集合或数组循环输出，并动态更改html代码。配合table、div等控件使用。(个人最喜欢的绑定元素，强大的存在)

html：

 1 <table class="table table-bordered" style="margin-top:5px;">
 2     <thead>
 3         <tr>
 4             <th>公司名称</th>
 5             <th>公司地址</th>
 6             <th></th>
 7         </tr>
 8     </thead>
 9     <tbody data-bind="foreach:unitlist">
10         <tr>
11             <td><input type="text" data-bind="value:unitname" /></td>
12             <td><input type="text" data-bind="value:address" /></td>
13             <td><button class="btn btn-danger" data-bind="click:$root.removeunitinfo">删除</button></td>
14         </tr>
15     </tbody>
16     <tfoot>
17         <tr>
18             <td colspan="3">
19                 <button type="button" class="btn btn-primary" data-bind="click:addunitinfo">增加</button>
20             </td>
21         </tr>
22     </tfoot>
23 </table>
24 <div>
25     <label>现有公司信息列表:</label>
26     <div data-bind="foreach:unitlist">
27         <label data-bind="text:'公司名称:'+unitname()+'.公司地址:'+address()+'.'"></label><br />
28     </div>
29 </div>

js代码：

 1 <script type="text/javascript">
 2     function unitviewmodel(name, addressinfo) {
 3         unitname = ko.observable(name);
 4         address = ko.observable(addressinfo);
 5     }
 6 
 7     var viewmodel = {
 8         unitlist: ko.observablearray(),
 9 
10         addunitinfo: function () {
11             viewmodel.unitlist.push(new unitviewmodel("", ""));
12         },
13         removeunitinfo: function (unit) {
14             viewmodel.unitlist.remove(unit);
15         },
16     };
17 
18     $(function () {
19         ko.applybindings(viewmodel);//完成绑定
20         viewmodel.unitlist.push(new unitviewmodel("星城科技", "湖南-长沙"));
21         viewmodel.unitlist.push(new unitviewmodel("星城集团", "湖南-长沙"));
22         viewmodel.unitlist.push(new unitviewmodel("中车集团", "湖南-株洲"));
23     });
24 </script>

动画效果图：

 

本次对于所有绑定元素进行了简单的功能讲解和操作，后期将会综合运用这些完成一些功能。

　　本文地址： https://www.cnblogs.com/ckexp/p/9296339.html

　　本文demo地址：https://gitee.com/530521314/koinstance.git

 

 

2018-08-26,望技术有成后能回来看见自己的脚步