Knockout应用开发指南之HelloWorld

 
 
 
 

  
  
  
  
First name: 
  
  
  
  
Last name: 
  
  
  
  
Hello,  !
 
 
 
 

 
 
 
 

  
  
  
  
// 这里是声明的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
 
 
 
 

 
 
 
 

  
  
  
  
You've clicked   times
  
  
  
  
  

  
  
  
  
Click me  
  
  
  
  

  
  
  
  

  
  
  
  
    That's too many clicks! Please stop before you wear out your fingers. 
  
  
  
  
    Reset clicks
  
  
  
  

 
 
 
 

  
  
  
  
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());
 
 
 
 

 
 
 
 

  
  
  
  

  
  
  
  
    New item: 
  
  
  
  
    
  
  
  
  
     0">Add
  
  
  
  
    
Your items:
  
  
  
  
     
  
  
  
  

 
 
 
 

 
 
 
 

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

 
 
 
 

  
  
  
  

  
  
  
  
    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());
 
 
 
 

原文：http://www.cnblogs.com/TomXu/archive/2011/11/30/2257067.html

【系列文章】

1. 用JavaScript评估用户输入密码的强度（Knockout版）
2. Knockout应用开发指南之创建自定义绑定
3. Knockout应用开发指南之模板绑定
4. Knockout应用开发指南之绑定语法
5. Knockout应用开发指南之监控属性(Observables)
6. Knockout应用开发指南之入门介绍

本文名称：Knockout应用开发指南之HelloWorld
文章路径：http://www.shufengxianlan.com/qtweb/news2/247052.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联