当然，代码也需要做稍许修改。通过添加自定义的模板页，只要后台对应的实体模型建好了，在前端只需要新建两个自定义视图，一个简单的增删改查即可完成，不用写一句js代码。
三、select组件的绑定
上面介绍了下T4封装增删改查的语法，页面所有的组件基本都是文本框，然而，在实际项目中，很多的查询和编辑页面都会存在下拉框的展示，对于下拉框，我们该如何处理呢？不卖关子了，直接给出解决方案吧，比如编辑页面我们可以在后台将下拉框的数据源放在实体里面。
用户的实体
[DataContract] public class User { [DataMember] public int id { get; set; } [DataMember] public string Name { get; set; } [DataMember] public string FullName { get; set; } [DataMember] public int Age { get; set; } [DataMember] public string Des { get; set; } [DataMember] public DateTime Createtime { get; set; } [DataMember] public string strCreatetime { get; set; } [DataMember] public string DepartmentId { get; set; } [DataMember] public object Departments { get; set; } }
然后编辑页面
public ActionResult Edit(User model) { model.Departments = DepartmentModel.GetData(); return View(model); }
然后前端绑定即可。
<div> <label for="txt_des">所属部门</label> <select data-bind="options: editModel.Departments, optionsText: 'Name', optionsValue: 'Id', value:editModel.DepartmentId"></select> </div>
JS代码不用做任何修改，新增和编辑的时候部门字段就能自动添加到viewmodel里面去。
当然，我们很多项目使用的下拉框都不是单纯的select，因为单纯的select样式实在是难看，于是乎出了很多的select组件，比如博主之前分享的select2、MultiSelect等等。当使用这些组件去初始化select时，审核元素你会发现，这个时候界面上的下拉框已经不是单纯的select标签了，而是由组件自定义的很多其他标签组成。我们就以select2组件为例来看看直接按照上面的这样初始化是否可行。
我们将编辑页面初始化的js代码增加最后一句：
<script type="text/javascript"> $(function () { var model = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)); var viewModel = { formId: "formEdit", editModel : model, urls : { submit : model.id == 0 ? "/User/Add" : "/User/Update" }, validator:{ fields: { Name: { validators: { notEmpty: { message: '名称不能为空！' } } } } } }; ko.bindingEditViewModel(viewModel); $("#sel_dept").select2({}); }); </script>
通过新增和编辑发现，这样确实可行！分析原因，虽然初始化成select2组件之后，页面的html发生了变化，但是组件最终还是会将选中值呈现在原始的select控件上面。不知道除了select2，其他select初始化组件会不会这样，待验证。但是这里有一点需要说明下，在初始化select2之前，下拉框的options必须先绑定值，也就是说，组件的初始化必须要放在ko.applyBinding()之后。
四、总结
至此，ko结合bootstrapTable的模板生成以及select控件的使用基本可用，当然，还有待完善。后面如果有时间，博主会整理下其他前端组件和ko的联合使用，比如我们最常见的日期控件。如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: