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