KnockoutJS-绑定元素
目录
工作变更，又走回了WPF，一个来月没有接触web开发了，之前的KnockoutJS却不想放弃，继续进行知识的巩固，下个月开始重新走回web开发之路，还是得用回一些习惯了的工具。本次开始接触各绑定元素功能、用法，这些绑定方式是在使用ko过程中用的最多的。
绑定元素在KnockoutJS中可以分为三大类
1、文本控制与显示隐藏
2、流程控制
3、配合表单使用
从个人使用过程中应用程度进行排序展示：
**value：**在DOM元素与viewModel对象的属性间建立桥梁，用户编辑控件时viewModel中对应属性值将自动更新，同样在更新了对应属性后，用户控件展示数据也将自动更新。常用于input、select、textarea等控件；
**text：**绑定到DOM元素上，将viewModel对象的属性的值展示在绑定元素上。常用于p、pre、label、span、th、td等控件使用；
click：绑定到DOM元素上添加事件句柄，当点击事件被触发时，执行我们定义好的JS函数。常用于button、input、a等控件使用。
click说明：在绑定函数时，可以指定任意函数，即在viewModel中声明的函数和在viewModel之外声明的函数都可被调用，同时在调用viewModel之内的函数时可以直接写函数名，而无需带上viewModel对象名。
- **visible:**绑定到DOM元素上，该元素的隐藏或显示将有viewModel的属性状态、函数返回值或表达式来决定。
针对前四个绑定元素，简单演示一下功能：
Html:
<div>
<label>公司名称</label>
<input type="text" data-bind="value:unitName" /><br />
<label>公司地址</label>
<input type="text" data-bind="value:address" /><br />
<p data-bind="text:'您的公司名称为:'+unitName()+'，公司地址是:'+address()+' .'"></p>
<pre data-bind="text:'您的公司名称为:'+unitName()+'，公司地址是:'+address()+' .'"></pre>
<label data-bind="text:'您的公司名称为:'+unitName()+'，公司地址是:'+address()+' .'"></label><br />
<span data-bind="text:'您的公司名称为:'+unitName()+'，公司地址是:'+address()+' .'"></span><br />
<table>
<tr>
<th data-bind="text:unitName"></th>
</tr>
<tr>
<td data-bind="text:address"></td>
</tr>
</table>
<div data-bind="visible:visibleButton">
<button data-bind="click: updateUnitName">修改公司名称为中部星城科技</button><br />
<button data-bind="click: updateAddress">修改公司地址为湖南长沙雨花区</button>
</div>
<div>
<button data-bind="click:function(){viewModel.visibleButton(false);}">隐藏上面两个按钮</button>
</div>
</div>
JS代码:
<script type="text/javascript">
var viewModel = {
//value、text
unitName: ko.observable(""),
address: ko.observable(""),
//click
//viewModel内JS函数
updateAddress: function () {
this.address("湖南长沙雨花区");
},
//visible
visibleButton: ko.observable(true),
};
//任意JS函数
function updateUnitName() {
viewModel.unitName("中部星城科技");
}
$(function () {
ko.applyBindings(viewModel);//完成绑定
});
</script>
动画效果图：
- **options：**该绑定元素只用于在select中使用，通过关联viewModel中提供的数组，使得select控件能够展示出数组中的所有项。
options，用于绑定下拉列表中各项（可选参数-optionsCaption，在默认情形下不想选择任何一个option项时，给予提示语，诸如“—请选择—”、或“———”之类的，作为默认选项，该项的值为undefined）。
optionsText,用于确定下拉列表中每一项的指定属性作为展示列，并可以在此基础上进行扩展，将指定属性传入函数中加工返回新的展示信息，。
optionsValue,用于确定下拉列表中每一项的指定属性作为标识列。
**checked：**绑定到type为checkbox的input控件上，关联viewModel的属性状态，相互间的变动都会使得双方更新状态，状态有选中和未选中。仅用于input控件指定类型为checkbox时使用。
**css：**将一个或多个class动态绑定到DOM元素上，根据具体业务变更绑定的class。常用于class之间大范围样式的切换，通过设计JS函数完成指定class是否启用。注意：在设计class时如果存在不合法的命名下，如my-class需转换为‘my-class’。
**style：**作用效果小于css，将一个或多个style的值绑定到DOM元素上，常用于单个或少数量style变更时使用。
**attr：**更改DOM元素的任何属性值，关联viewModel上对应的attr属性值，便于动态更改展示。注意：在取属性名称时如果存在不合法的命名下，如data-something需转换为’data-something’。
针对该五个绑定元素，简单演示一下功能：
Html:
<div style="margin-top:50px;">
<style type="text/css">
.testClass {
background-color: #ffd800;
font-size: 16px;
}
</style>
<label>公司类型：</label>
<select data-bind="options:unitTypeOptions, optionsCaption:'---请选择公司类型---',optionsText: 'text', optionsValue: 'value', value:choiceUnitTypeValue"></select><br />
<input type="checkbox" data-bind="checked:visibleLabel" /><label data-bind="css: { testClass: visibleLabel}">启用展示</label>
<label data-bind="text:'选中值：'+choiceUnitTypeValue(),visible:visibleLabel"></label><br />
<a data-bind="attr: { title: tips},style:{'background-color':visibleLabel()?'red':'white'}">公司官网</a>
<button data-bind="click:function(){viewModel.tips('knockoutJS');}">切换a标签提示信息</button>
</div>
JS代码:
<script type="text/javascript">
var viewModel = {
//value、text
unitName: ko.observable(""),
address: ko.observable(""),
//click
//viewModel内JS函数
updateAddress: function () {
this.address("湖南长沙雨花区");
},
//visible
visibleButton: ko.observable(true),
//options
unitTypeOptions: ko.observableArray([
{ text: "有限公司", value: "1" },
{ text: "有限责任公司", value: "2" },
{ text: "国有独资公司", value: "3" },
{ text: "股份有限公司", value: "4" }
]),
choiceUnitTypeValue: ko.observable(),
//checked
visibleLabel: ko.observable(true),
//attr
tips: ko.observable("hello"),
};
//任意JS函数
function updateUnitName() {
viewModel.unitName("中部星城科技");
}
$(function () {
ko.applyBindings(viewModel);//完成绑定
});
</script>
动画效果图：
**html：**绑定到DOM元素上，并将viewModel的属性值作为展示，与text用法相同，但不同处在于，html可以将内容中存在的html标记渲染为真实的html内容。(个人建议少用或不用)
**event：**为DOM元素的事件添加指定的事件句柄，事件被触发时执行我们定义好的逻辑。常用在keypress、mouseover、mouseout事件上。与click用法一样，可以设置为任意的js函数。
**submit：**绑定在表单上用于提交时拦截默认表单提交动作，执行我们定义好的逻辑，然后真正执行提交操作,该提交表单操作可以是原有form表单提交，也可以是我们设计的表单提交，通过参数设置。仅用于form控件。
**enable：**绑定DOM元素自身的启用禁用状态，关联viewModel的属性状态，来控制该DOM元素的启用。常用于input、select、textarea等控件中。
**disable：**与enable功能相同，使用方式相反，当disable为true时将被禁用。常用于input、select、textarea等控件中。
**selectedOptions：**在multi-select列表中,选择一个或多个项，并将选中的项加入到selectedOptions关联的viewModel的属性数组中。常用于多选项选择。
针对该六个绑定元素，简单演示一下功能：
Html:
<div style="margin-top:50px;">
<label>html元素所绑定的内容为：</label>
<label data-bind="html:htmlContent"></label><br />
<div data-bind="event:{mouseover:buttonKeyPress}">
鼠标移入改变html元素绑定内容
</div>
<hr />
<form action="@Url.Action("CreateUser")" method="post" data-bind="submit:submitForm">
<label>用户名：</label>
<input type="text" name="userName" data-bind="enable:userNameEnable" />
<label>密码：</label>
<input type="text" name="password" data-bind="disable:passwordDisable" />
<input type="submit" value="增加" />
</form><br />
<button data-bind="click:function(){viewModel.userNameEnable(true);}">启用用户名输入</button>
<button style="margin-left:10px;" data-bind="click:function(){viewModel.passwordDisable(false);}">启用密码输入</button><br />
<hr />
<p>
<select data-bind="options: companyOptions,selectedOptions: chosenCompanies" size="5" multiple="true"></select>
<select data-bind="options: chosenCompanies," size="5"></select>
</p>
</div>
JS代码：
<script type="text/javascript">
var viewModel = {
//html
htmlContent: ko.observable("<a href='#'>百度一下</a>"),
//event
buttonKeyPress: function () {
this.htmlContent("keyPress事件被触发！");
},
//submit
submitForm: function (formElement) {
//执行逻辑
//执行表单提交
//或返回到默认表单提交return true
return true;
},
//enable
userNameEnable: ko.observable(false),
//disable
passwordDisable: ko.observable(true),
//selectedOptions
companyOptions: ko.observableArray(['百度', '阿里', '腾讯']),
chosenCompanies: ko.observableArray(['百度'])
};
//任意JS函数
function updateUnitName() {
viewModel.unitName("中部星城科技");
}
$(function () {
ko.applyBindings(viewModel);//完成绑定
});
</script>
动画效果图：
**uniqueName：**绑定DOM元素有一个非空的name属性，在没有设置name属性下，会绑定上一个而唯一的name属性。(使用场景太少，个人还没有使用过)
**foreach:**绑定到DOM元素上，将关联的viewModel中指定集合或数组循环输出，并动态更改html代码。配合table、div等控件使用。(个人最喜欢的绑定元素，强大的存在)
Html：
<table class="table table-bordered" style="margin-top:5px;">
<thead>
<tr>
<th>公司名称</th>
<th>公司地址</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach:unitList">
<tr>
<td><input type="text" data-bind="value:unitName" /></td>
<td><input type="text" data-bind="value:address" /></td>
<td><button class="btn btn-danger" data-bind="click:$root.removeUnitInfo">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<button type="button" class="btn btn-primary" data-bind="click:addUnitInfo">增加</button>
</td>
</tr>
</tfoot>
</table>
<div>
<label>现有公司信息列表:</label>
<div data-bind="foreach:unitList">
<label data-bind="text:'公司名称:'+unitName()+'.公司地址:'+address()+'.'"></label><br />
</div>
</div>
JS代码：
<script type="text/javascript">
function unitViewModel(name, addressInfo) {
unitName = ko.observable(name);
address = ko.observable(addressInfo);
}
var viewModel = {
unitList: ko.observableArray(),
addUnitInfo: function () {
viewModel.unitList.push(new unitViewModel("", ""));
},
removeUnitInfo: function (unit) {
viewModel.unitList.remove(unit);
},
};
$(function () {
ko.applyBindings(viewModel);//完成绑定
viewModel.unitList.push(new unitViewModel("星城科技", "湖南-长沙"));
viewModel.unitList.push(new unitViewModel("星城集团", "湖南-长沙"));
viewModel.unitList.push(new unitViewModel("中车集团", "湖南-株洲"));
});
</script>
动画效果图：
本次对于所有绑定元素进行了简单的功能讲解和操作，后期将会综合运用这些完成一些功能。
代码地址：https://gitee.com/530521314/Partner.TreasureChest.git
2018-08-26,望技术有成后能回来看见自己的脚步