Knockout基本语法有哪些

本篇内容介绍了“Knockout基本语法有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

专注于为中小企业提供做网站、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业百色免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

1 Hello world

这个例子里，2个输入框都被绑定到data model上的observable变量上。“full name”显示的是一个dependent observable，它的值是前面2个输入框的值合并一起的结果。

无论哪个输入框更新，都会看到“full name” 显示结果都会自动更新。查看HTML源代码可以看到我们不需要声明onchange事件。Knockout知道什么时候该更新UI。

代码: View

First name: 
 
Last name: 
 
Hello,  !

代码: View model

// 这里是声明的view model   var viewModel = {      firstName: ko.observable("Planet"),      lastName: ko.observable("Earth")  };   viewModel.fullName = ko.dependentObservable(function () {      // Knockout tracks dependencies automatically.       //It knows that fullName depends on firstName and lastName,                 //because these get called when evaluating fullName.      return viewModel.firstName() + " " + viewModel.lastName();  });   ko.applyBindings(viewModel); // This makes Knockout get to work

2 Click counter

这个例子展示的创建一个view model并且绑定各种绑定到HTML元素标记上，以便展示和修改view model的状态。

Knockout根据依赖项。在内部，hasClickedTooManyTimes在numberOfClicks上有个订阅，以便当numberOfClicks改变的时候，强制hasClickedTooManyTimes重新执行。相似的，UI界面上多个地方引用hasClickedTooManyTimes，所以当hasClickedTooManyTimes 改变的时候，也讲导致UI界面更新。

不需要手工声明或者订阅这些subscription订阅，他们由KO框架自己创建和销毁。参考如下代码实现：

代码: View

You've clicked   times
    Click me         That's too many clicks! Please stop before you wear out your fingers.      Reset clicks 

代码: View model

var clickCounterViewModel = function () {      this.numberOfClicks = ko.observable(0);        this.registerClick = function () {          this.numberOfClicks(this.numberOfClicks() + 1);      }        this.hasClickedTooManyTimes = ko.dependentObservable(function () {          return this.numberOfClicks() >= 3;      }, this);  };   ko.applyBindings(new clickCounterViewModel());

3 Simple list

这个例子展示的是绑定到数组上。

注意到，只有当你在输入框里输入一些值的时候，Add按钮才可用。参考下面的HTML代码是如何使用enable 绑定。

代码: View

     New item:            0">Add     
Your items:
       

代码: View model

var viewModel = {};  viewModel.items = ko.observableArray(["Alpha", "Beta", "Gamma"]);  viewModel.itemToAdd = ko.observable("");  viewModel.addItem = function () {      if (viewModel.itemToAdd() != "") {          viewModel.items.push(viewModel.itemToAdd());          // Adds the item. Writing to the "items" observableArray causes any associated UI to update.           viewModel.itemToAdd("");                            // Clears the text box, because it's bound to the "itemToAdd" observable      }  }   ko.applyBindings(viewModel);

4 Better list

这个例子是在上个例子的基础上添加remove item功能(multi-selection)和排序功能。 “remove”和“sort”按钮在不能用的时候会变成disabled状态(例如，没有足够的item来排序)。

参考HTML代码是如何实现这些功能的，另外这个例子也展示了如何使用匿名函数来实现排序。

代码: View

     Add item:       0">Add   
Your values:
    
      0">Remove      1">Sort 

代码: View model

// In this example, betterListModel is a class, and the view model is an instance of it.   // See simpleList.html for an example of how to construct a view model without defining a class for it. Either technique works fine.   var betterListModel = function () {      this.itemToAdd = new ko.observable("");      this.allItems = new ko.observableArray(["Fries", "Eggs Benedict", "Ham", "Cheese"]);   // Initial items   this.selectedItems = new ko.observableArray(["Ham"]);                                  // Initial selection        this.addItem = function () {          if ((this.itemToAdd() != "") && (this.allItems.indexOf(this.itemToAdd()) < 0))      // Prevent blanks and duplicates          this.allItems.push(this.itemToAdd());          this.itemToAdd(""); // Clear the text box      }        this.removeSelected = function () {          this.allItems.removeAll(this.selectedItems());          this.selectedItems([]); // Clear selection      }  };   ko.applyBindings(new betterListModel());

“Knockout基本语法有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！