Knockoutjs快速入门(经典)

是一个由JavaScript实现的MVVM框架。主要功能如下：1 .声明性绑定2。可观察性和依赖性跟踪3。模板化。它在分离前台的业务逻辑和视图以及简化数据绑定过程方面发挥了重要作用。少说话，直接看例子，不说怎么下载。如果用VS开发，可以用Nuget一键搞定。1.基本绑定和依赖跟踪需要定义一个ViewModel:拷贝代码。代码如下： script type=' text/JavaScript '函数viewmodel () {this。名字='馨子'；this.lastName=' Yin} /script然后就是一个用于显示这个ViewModel的View:复制代码如下： div pdata-bind=' text 3360 first name '/P pdata-bind=' text 3360 first name '/P inputdata-bind=' value : first name '/inputdata-bind=' value 3360 first name '/div从这个视图中，可以看到声明式绑定的含义。您只需要使用标签上的data-bind属性将数据值绑定到相应的位置。有了View和ViewModel，还需要代码来关联它们：复制代码如下： ko . applybindings(new View model())；将它们放在一起，注意applyBinding代码必须在所有页面加载后执行。页面显示为： 。

让我们再来看看可观测值。这个功能不是天生的。您必须将视图模型设置为可观察的。方法如下： Copy代码如下： Function Viewmodel () {this。名字=ko.observable('馨子')；this . last name=ko . observable(' Yin ')；}其他无需更改。这时，如果改变输入框中的值，当焦点离开时，可以发现p中的值也发生了变化：。

我们再来看看依赖关系跟踪，也就是说，如果一个值依赖于多个值，并且其中任何一个值发生了变化，它就会自动发生变化。这是通过计算方法实现的，代码如下： Copy代码如下： Function ViewModel () {this。名字=ko。可观察的(“馨子”)；this . last name=ko . observable(' Yin ')；this . full name=ko.computed(function(){ return this . last name()' ' this . first name()；}，这个)；}请注意，获取可观察值是一个函数调用。这样，当名字或姓氏改变时，全名将自动相应地改变。

也可以通过代码改变可观察值，页面会自动刷新：复制代码如下：function viewmodel () {//.这个。capitalizeslastname=function(){ this。姓氏(这个。lastname()。touppercase())；}}在页面上添加一个按钮：复制代码如下： button data-bind='点击： capitalizeLastName ' caps/button。单击按钮后，viewmodel的capitalizelastname方法将启动。更改可观察值的方法是使用新值作为函数调用的参数。之后：

2.列表绑定加入我们有如下的订单视图模型，使用观察阵列来跟踪数组的变化。复制代码代码如下：var产品=[{name:'Thinkpad X1 '，价格：9000}，{名称： '惠普ProBook '，价格：5555}，{名称： '鼠标'，价格：45 }];函数order(){ var self=this；自我。items=ko。observablearray([//此数据应该从服务器加载新项（产品[0],1),新项（产品[1,2]));自我。价格=ko。computed(function(){ var p=0；for(var I=0；i self.items().长度；I){ var item=self。项目()[一]；p=项目。产品。价格*项目。金额()；}返回p；},自我);}订单里面的项目实际上应该是从服务器获得的，项目定义如下：复制代码代码如下：功能项目（产品、金额){ var self=this . product=product this . amount=ko . observable(金额);这个。SubTotal=ko。computed(function(){ return self。金额()*自我。产品。价格；},自我);}视图模型准备好之后，就可以实现视图。这次需要使用为每一个绑定，如下：复制代码代码如下：表d tr tdName/TD tdAmount/TD tdPrice/TD/tr/表d t body data-bind=' foreach : items ' tr TD data-bind=' text : product。名称'/TD TD TD select data-bind='选项3360[1，2，3，4，5，6]，值： amount '/select/TD TD TD TD data-bind=' text : subTotal '/TD/tr/t body/表H3订单价格Price:span这样一个基本的订单页面就好了，能够选择数量，价格会自动更新

下面给订单加上增删产品的功能，先给命令加上如下的方法：复制代码代码如下：函数Order(){//……self。remove=函数(项目){ self。物品。移除(项目)；}自我。addmouse=function(){ self。物品。推送(新项目(产品[2],1));} }给表格加上一列删除按钮：复制代码代码如下： TDA。移除'移除/a/TD再在表格底部加上一个增加产品的按钮：复制代码代码如下：按钮数据绑定='单击：添加鼠标'添加鼠标/按钮这时候，observableArray的功能就体现了，当你点击删除按钮或者底部的按钮的时候，页面节点会跟着变化，而不需要手动更新数字正射影像图节点，这使得前端的射流研究…大大简化