KnockoutJS-与服务端交互

　　几乎全部Web应用程序都要和服务器端交换数据，交换数据时最方便的就是使用JSON格式。Knockout能够实现很复杂的客户端交互，对于先后端交互使用的技术最为基本且经常使用的是Ajax，本次利用Ajax和ko的双向绑定完成一些简单的功能，能够快速展现出ko的方便之处。

　　Demo地址： https://gitee.com/530521314/koInstance.git

 

1、服务端返回数据绑定到客户端

　　一、准备好一些初始数据，直接经过View方法将视图实体返回到视图文件中。

　　

　　二、前端设置为强类型，初始化ko并从Model中获取数据并加载到ko对象中，同时完成了页面渲染。(注意暂时未使用Mapping插件)

　　

　　三、效果实现图

　　

2、客户端经过Get请求服务端数据

 　　一、经过前端请求，完成将服务端数据加载到当前页面中，使用$.get方法或是$.getjson方法或是$.ajax方法都行，本次直接使用$.get方法，当获取服务端数据成功后，清除界面上的已有数据，并将新数据循环绑定到viewModel中

　　

　　二、服务端编写简单的方法，在原来基础数据的基础上增长一条新数据，并将数据打包成Json格式，注意将获取成功与否的操做结果返回

　　

　　三、效果实现图

　　

3、客户端POST提交数据到服务端(手动绑定)

　　前端数据提交到后端的方式能够有简单的get提交，提交几个参数跟在url后面，用于查询相关信息，也有使用post提交表单数据或是json或xml格式的数据，本次只使用一下post提交json数据

　　一、post提交单条数据，将单条数据转换为json格式，使用ko提供的直接将viewModel中的集合转换成json格式的数据，该过程也可使用其它方式完成，并不是彻底依赖ko

　　

　　二、服务端指定接收参数，完成相应操做返回结果，注意使用了FromBody特性，只容许最多一个参数，若是有多余参数要使用，则将参数打包成一个新的类，大多使用dto

　　

　　三、前端提交整个集合到后台，先将集合打包成Json格式，而后使用ajax完成提交，操做过程当中，因为集合是存在于observableArray的监控数组中，不能直接序列化，所以须要使用其它方式进行转换

 　　

 　　四、在服务端使用List<>来接收，经过asp.net core提供的模型绑定，将前端请求中的json数据完成绑定到List集合中

　　

　　五、效果实现图

 　　

4、客户端POST提交数据到服务端(自动绑定)

 　　对于以前的一些操做，有些操做可使用ko提供的插件直接帮助咱们完成绑定工做，而无需进行大量属性的绑定工做和处理复杂的嵌套结构，如同在后端的AutoMapper工具，在ko中有一个ko.mapping插件，能够很大程度上提升咱们的开发效率。

　　mapping插件使得JavaScript简单对象（或JSON结构）转换成Observable的view model，这样一来，无需在前端声明一些view Model类了。

　　一、从后台返回的List集合经过mapping插件绑定到前端viewModel实例属性中

　　

　　二、获取服务端的List集合绑定到前端页面中，使用ko插件直接绑定

　　

　　注意：在使用asp.net core时，服务端返回的json格式为驼峰式，当在上一步操做中，初始化时为首字母大写使用的是帕斯卡命名方式，而且在页面元素中也是使用首字母大写的形式，所以须要改变服务端默认的驼峰式规则。

　　在StartUp中，修改mvc的默认规则，使用Newtonsoft提供的转换方式，这样一来，先后端交互，前端绑定，传递到后端都是使用帕斯卡命名规则，对于前端来说最好是使用驼峰式，一样也能够作相应的改变，好比对服务端视图模型属性中使用JsonProperty特性。

　　

　　三、POST提交前端数组并序列化后到服务端中，后端控制器中并没有修改，只在前端相应变化便可

　　

 　至此，已完成了knockoutJS先后端交互的方式，对于其它表单提交等等，都比较简单，最后，祝你们新年快乐！。

 

　本文地址： http://www.javashuo.com/article/p-dnwsgrlf-eh.html 

　欢迎关注微信订阅号，有新的文章将同步到订阅号中

　

2019-01-02,望技术有成后能回来看见本身的脚步