KnockoutJS基础知识(二)
2018-08-26 17:27:40来源：博客园 阅读 ()
工作变更，又走回了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,望技术有成后能回来看见自己的脚步
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- 如何用算法删除重复数据 2020-03-18
- JavaScript基础知识之数据类型 2019-10-12
- ko knockoutjs动态属性绑定技巧应用 2019-09-23
- js-01-基础知识 2019-08-14
- 工作查漏补缺 2019-08-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
