控制流

foreach bind

1.示例

People
 

    

        Name at position :
        
        Remove
    

Add

    function ViewModel(){
        var self = this;

        self.people = ko.observableArray([
            {name:"Britney"},
            {name:"Bryant"},
            {name:"Adele"}
        ]);

        self.removePerson = function(){
            self.people.remove(this);
        };

        self.addPerson = function(){
            self.people.push({name:"Ellie comes at " + new Date().toLocaleString()});
        };

    }

    ko.applyBindings(new ViewModel());

2.不带元素的绑定

    
Header item
    
        
Item 
    


 ko.applyBindings({
    myItems:['A','B','C','D']
 });

if bind

1.绑定示例

    

         Country:
        

            Capital:
        
    

    ko.applyBindings({
        countries:[
            {name:'中国',capital:{cityName:'北京'}},
            {name:'美国',capital:{cityName:'华盛顿'}},
            {name:'香港',capital:null},
            {name:'日本',capital:{cityName:'东京'}}
        ]
    })；

if 绑定是很重要的，它能让代码正常工作。 比如上面的例子，如果没有 if 绑定， 那么当 capital 为空的时候， 子节点 capital.cityName 这个属性是不存在的，代码会报错。

2.使用表达式进行if绑定

 
    
This item always appears
 
     
        
I want to make this item present/absent dynamically
    

如果表达式包含 observable 变量，那么当变量值重新计算时，表达式的值也会被重新计算。相应的，当表达式的值被重新计算后 ，if 里面的代码块会被重新添加或者移除 。当重新添加代码块时，data-bind 属性会被应用到原来代码的新拷贝上。

ifnot bing

if 绑定的表达式取反
恩 就这么简单！！！

with bind

    用户名：


    密码:


    登录



    
欢迎回来，上次登录时间为： 
    

        

    

    退出登录



function ViewModel(){
    var self=this;
        
    //监控用户填入的用户名和密码
    self.userName = ko.observable('请输入用户名');
    self.psw = ko.observable();
    //用户明细监控
    self.userInfo = ko.observable();
            
    //通过if绑定来控制登录表单的显示与否
    self.showInput = ko.observable(true);
    //点击登录按钮时触发表单的提交事件
    self.login = function(){
        var username = self.userName();
        var loginLog = [
            {text:username +' 今天是星期'+(new Date().getDay()+1)},
            {text:username +' 美好的一天从这里开始'},
            {text:username+' 祝您生活愉快！'}
        ];
        //向用户信息userInfo 中写入信息
        self.userInfo({lastLoginDate:new Date().toLocaleString(),userInfoData:loginLog});
        //登录成功后，隐藏form表单
        self.showInput(false);
    }
    //绑定退出登录
    self.signOut = function(){
        alert("确定退出吗？");
        //清空userInfo
        self.userInfo(undefined);
        //退出登录后显示登录表单
        self.showInput(true);
    }

    //绑定focus事件，当用户聚焦用户名输入框时，清除input中的内容
    self.clearInput = function(){
        self.userName('');
    }
}

ko.applyBindings(new ViewModel());