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;