knockoutjs的学习

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

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

 

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

 

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

 

  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

script type="text/javascript">    var AppViewModel = {    helloWorld: 'Hello World !!'    };     ko.applyBindings(AppViewModel);    </script>     <span data-bind="text:helloWorld"></span> <script type="text/javascript"> var AppViewModel = { helloWorld: 'Hello World !!' }; ko.applyBindings(AppViewModel); </script> <span data-bind="text:helloWorld"></span>

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

 

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

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>  <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>