控制流

foreach bind

1.示例

<h4>People</h4> 
<ul data-bind="foreach:people">
    <li>
        Name at position <span data-bind="text:$index"></span>:
        <span data-bind="text:name"></span>
        <a href="#" data-bind="click:$parent.removePerson">Remove</a>
    </li>
</ul>
<button data-bind="click:addPerson">Add</button>

    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.不带元素的绑定

<ul>
    <li>Header item</li>
    <!-- ko foreach:myItems -->
        <li>Item <span data-bind="text:$data"></span></li>
    <!-- /ko -->
</ul>

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

if bind

1.绑定示例

<ul data-bind="foreach:countries">
    <li>
         Country:<span data-bind="text:name"></span>
        <div data-bind="if:capital,style:{display:'inline-block'}">
            Capital:<span data-bind="text:capital.cityName"></span>
        </div>
    </li>
</ul>
    ko.applyBindings({
        countries:[
            {name:'中国',capital:{cityName:'北京'}},
            {name:'美国',capital:{cityName:'华盛顿'}},
            {name:'香港',capital:null},
            {name:'日本',capital:{cityName:'东京'}}
        ]
    })；

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

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

<ul> 
    <li>This item always appears</li> 
    <!-- ko if: someExpressionGoesHere --> 
        <li>I want to make this item present/absent dynamically</li>
    <!-- /ko -->
</ul>

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

ifnot bing

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

with bind

<form  data-bind="submit:login,if:showInput">
    用户名：<input  data-bind="value:userName,event:{focus:clearInput}" /><br><br>
    密码:<input type="password" data-bind="value:psw"><br><br>
    <button type="submit">登录</button>
</form>

<div data-bind="with:userInfo">
    <h3>欢迎回来，上次登录时间为： <span data-bind="text:lastLoginDate"></span></h3>
    <ol data-bind="foreach:userInfoData">
        <li data-bind="text:text"></li>
    </ol>

    <button data-bind="click:$parent.signOut">退出登录</button>
</div>


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