MVC+knockoutjs知识点总结

工作需要，使用到了MVC开发一部分web页面，并且使用了knockoutjs前端框架。相关技术点写在这里，算是方便以后查阅。

/*全部是个人观点和经验，写下来也是方便自己，不保证全部正确，特别声明，防止误人子弟*/

【MVC部分】

新建一个MVC工程，目录结构就已经自动规划好，按照这个结构放入相应的文件，实际操作非常简单。

个人认为框架这种东西，目的就是方便快速地开发，所以尽量接受并且按照给出的模式开发，不要打破规则（高手除外），才能够更好地发挥它原本的优势。而且新手也不会容易把自己搞得晕头转向。

创建工程时视图引擎我选择的是razor，好处就是语法会有更好的闭合，不容易出错。当然razor的优势不仅于此啦。

来一张新建空白MVC工程的目录图：

其实并没有用到全部的功能，复杂的东西都没有深入研究（不求甚解要批评）

【knockoutjs部分】

knockoutjs官方文档：http://knockoutjs.com/documentation/introduction.html

knockoutjs是一个js的框架，在前端模拟MVVM，帮助我们实现了前端的数据双向绑定。

js中维护一个model对象，画面中使用特定语法将model中的属性绑定到控件。

js中改变这个model对象的属性值时，画面上的显示内容可以在画面不进行刷新的情况下同步更新；画面上编辑内容后，js中的model对象的属性值也立即被更新。

knockoutjs有多种绑定方式，例如visible绑定，html绑定，for绑定等等。

*但是，实际使用时，发现大量数据使用for绑定时会有性能问题，会导致画面长时间卡死。使用需要慎重。（推测绑定实际也是操作dom，大量操作dom必然会让画面卡死）

举个栗子：

a.首先定义一个model

var ViewModel = function () {                      var self = this;                       self.DataList = ko.observableArray();                  //集合类型  self.IsNew = ko.observable(false);                         //bool类型    self.NewText = ko.observable("");                            //字符串类型 ……
}

b.实例化一个model对象

myModel = new ViewModel();

c.设定属性值

此处的dataModel是对应后台的Model层的一个模型对象，具体转换方式可以参考后面的【前端model与后台model关系】

resetData(dataModel);function resetData(dataModel) {myModel.reportDataList(dataModel.DataList);myModel.IsNew(dataModel.BIsNew);myModel.NewText(dataModel.StrNewText);……
}

d.绑定到ko

ko.applyBindings(myModel);

e.画面控件绑定

<div data-bind="visible: IsNew">测试测试</div>
<div data-bind="html:NewText,attr: {title:NewText},visible: IsNew"></div>

knockoutjs绑定还可以指定作用范围，类似这样：

ko.applyBindings(myModel,  document.getElementById("myDiv"));

这时myModel的作用域就限定在myDiv中。

【前端model与后台model关系】

a.controller中对model对象进行转换，存入viewbag中

ViewBag.dataModel = GlobalObject.escape(Newtonsoft.Json.JsonConvert.SerializeObject(myDataModel));

b.前台将viewbag中的数据转换为json对象

var dataModel = JSON.parse(unescape("@ViewBag.dataModel"));

c.至此，可以使用refReportVM中的属性

var strNewText = dataModel.StrNewText;

转载于:https://www.cnblogs.com/qqxy/p/5435203.html

MVC+knockoutjs知识点总结相关推荐

KnockoutJs篇：快速掌握KnockoutJs
一.引言之前这个系列文章已经介绍Bootstrap.由于最近项目中,前端是Asp.net MVC + KnockoutJs + Bootstrap来做的.所以我又重新开始写这个系列.今天就让我们来看 ...
Spring/Boot/Cloud系列知识：SpringMVC进行HTTP信息接收和发送的过程（1）
1.整体调用过程本文承接本专题上一篇文章<Spring/Boot/Cloud系列知识:HttpMessageConverter转换器使用方式>,在上一篇文章中讲解了HttpMessage ...
python基于django的考研报名交流平台
随着我国教育的改革和人们对知识水平的认可,考验已经成为很多大学生毕业后的首选之一,但是目前网上的很多考研网站都不够好,做的不够全面,有各种各样的问题在里面,比如学生不能够找到对应的学习课程,学习的时候 ...
神仙程序媛小姐姐的一些列Java教程，从小白到进阶，春招和秋招必备的面试题，全站式保姆的Java教程导航帖（未完结）
Java入门教程导航,未完结,以后的时间不定期补番. Java基础篇 (入门阶段) 小姐姐教你:java环境变量的配置与详解(全网最详细教程小姐姐手把手教你最基础Java语法,快来我的碗中 [Ja ...
MVC项目开发中那些用到的知识点(登录权限认证)
话说从开始接触MVC到现在也有一段时间了,记得好像是从2012年8月初开始做项目的.就记录一下自己所用到的且认为重要的知识点吧. 首先做的便是一个登录,那么就用到了登录权限认证: public cla ...
【转】ASP.NET MVC框架下使用MVVM模式-KnockOutJS+JQ模板例子
KnockOutJS学习系列----(一) 好几个月没去写博客了,最近也是因为项目紧张,不过这个不是借口,J. 很多时候可能是因为事情一多,然后没法静下来心来去写点东西,学点东西. 也很抱歉,突然看到 ...
[ASP.NET MVC 小牛之路]02 - C#知识点提要
特别提醒:本文编写时间是 2013 年,请根据目前 .NET 发展接收你所需的知识点. 本篇博文主要对asp.net mvc开发需要撑握的C#语言知识点进行简单回顾,尤其是C# 3.0才有的一些C#语 ...
MVC项目开发中那些用到的知识点(Asp.Net Mvc3.0 Areas)
前言我们知道MVC项目各部分职责比较清晰,相比较ASP.NET Webform而言,MVC项目的业务逻辑和页面展现较好地分离开来,这样的做法有许多优点,比如可测试,易扩展等等.但是在实际的开发中,随 ...
ASP.NET MVC必知必会知识点总结（二）
一.实现Controller的依赖注入: 1.自定义继承DefaultControllerFactory 类的控制器工厂类并重写GetControllerInstance方法:(如:InjectCon ...
Spring MVC 4.x 知识点
2019独角兽企业重金招聘Python工程师标准>>> 我的博客:http://blog.geekidentity.com/spring/spring_mvc_4.x_action/ ...

MVC+knockoutjs知识点总结

MVC+knockoutjs知识点总结相关推荐

最新文章

热门文章