knockoutjs的学习

今天对knockoutjs有了一个初步的了解。Knockout.js是一个JavaScript库，它让HTML控件很容易与数据进行绑定。Knockout.js使用的是“模型-视图-视图模型（MVVM）”模式。它对于分离前台的业务逻辑和视图简化数据绑定过程有显著的作用

Vs2012的asp.net mvc4中集成了knockout.js，在html或者cshtml就可以直接引用。

 

<script src=  type=”text/javascript”></script>

 

练习的第一个示例小程序：

 

<script type="text/javascript">

var AppViewModel = {

helloWorld: 'Hello World !!'

}; 

ko.applyBindings(AppViewModel);

</script> 

<span data-bind="text:helloWorld"></span>

 

将helloWorld绑定到span空间上，运行，页面上输出了'Hello World !!，这样就实现了knockout数据的基本绑定。

 

练习的第二个示例小程序：

<script type="text/javascript">   

 function ViewModel() {       

 this.firstName = "Zixin";      

  this.lastName = "Yin";    

}

ko.applyBindings(new ViewModel());

</script> 

 

<div>    

 <p data-bind="text: firstName"></p>   

 <p data-bind="text: lasttName"></p>   

 <input data-bind="value: firstName"/>    

 <input data-bind="value: lastName"/> 

div> 

 

 

页面上显示了两组firstName和lastName，并且如果修改input的值时，当焦点离开的时候，p中的值也会相应的做出相同的变化，很神奇。

 

问题及疑惑：

 

1．第一次使用knockout时习惯性的把js写在了html的前面，结果不能正常显示，经过反复试验，将js写在了html的后面就能正常显示，让人很是费解。

 

2．在练习使用simpleGrid时，出现错误，如下：

 

猜测需要knockout.simpleGrid.js，但在网上找了好久，也没找到这个文件。不知这个错误怎么处理。

 

 解决方法：

1.   ：js写在了html的前面,后面的疑惑

原因：在运行那段Js时，konckoutjs对象 还没有加载好。

解决方法：

    正常我们是使用 jquery的，用 document.read后触发 ko.appBindings

代码：

var AppViewModel = {

helloWorld: 'Hello World !!'

};

 

    $(function(){

    ko.applyBindings(AppViewModel);

 

});

 

2. knockout.simpleGrid.js  问题

解决这个问题的方法，这个Demo是在他官方网站里看到，并且可以运行的，

可以查看它官网的网页源代码，从中找出它的demo中simpleGrid的js